web-editor-markdown

A web-based Markdown editor that supports collaborative editing extensions and convenient plug-in extensions

npm bundle size

💡 Web Editor Markdown

web-editor-markdown is a web browser-based, instant rendering Markdown editor. It is based on TypeScript and JavaScript, and does not rely on any third-party framework. It is friendly to Chinese, and can be easily extended and integrated into native JavaScript, Vue, React, Angular and other applications.it provides源码模式,双屏渲染模式,实时编辑模式and只读模式Four rendering modes.If necessary, its underlying layer also supports collaborative editing capabilities, providing atomic operations Operation For extended collaborative editing.

web-editor-markdown is a Markdown editor based on Web browser and real-time rendering. It is based on TypeScript and JavaScript, and does not rely on any third-party framework. It supports Chinese friendly and can be easily extended and connected to native JavaScript, Vue, React, Angular and other applications. It provides four rendering modes: SOURCE, SOURCE_AND_PREVIEW, RENDER and PREVIEW. If necessary, its underlying layer also supports the ability of collaborative editing and provides atomic Operation for extending collaborative editing.

✨ Chinese demo

✨ Demo

🛠️ Instructions for use

npm install web-editor-markdown --save
import { Editor, withUndoRedo } from "web-editor-markdown";
let editor = new Editor(document.getElementById('id')); // 初始化编辑器对象
editor = withUndoRedo(editor); // “撤销回退”插件生效
editor.insertTextAtCursor('**这是加粗文本**\n> 提示:通过 `cmd+/` 可以切换源码模式哦'); // 插入 markdown 内容
  • Others (for more api refer to the official website)
import { EditorViewMode } from "web-editor-markdown";
editor.switchViewMode(EditorViewMode.PREVIEW); // 切换模式:实时渲染、预览、源码、双屏模式,或者通过 cmd+/ 切换源码模式和实时渲染模式
console.log('content', editor.getContent()); // 获取编辑内容

#webbased #Markdown #editor #supports #collaborative #editing #extensions #convenient #plugin #extensions

Leave a Comment

Your email address will not be published. Required fields are marked *