A web-based Markdown editor that supports collaborative editing extensions and convenient plug-in extensions
💡 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