前端开发 Markdown 编辑器与富文本编辑器详解
一、现有开源项目分析
1. Markdown 编辑器
项目名称 技术栈 核心特性 适用场景
Editor.md JavaScript/Node.js 支持 GFM、代码块、流程图、数学公式，兼容 IE8+，提供主题切换功能 技术博客、网页站、在线文档
Bytemd Svelte/Vue/React 轻量级（30KB）、支持 Mermaid 流程图、SSR 兼容、插件系统完善 跨框架项目、高定制化需求
Wysimark React/Vue/纯 JS 实时渲染、图片上传与调整、支持 CommonMark/GFM，未来计划支持协同编辑 初创项目、轻量级网页编辑
Minditor React/Vue/原生 JS 块级编辑、Markdown 命令快捷输入、插件系统、支持 InlineBlock 嵌入 专业写作工具、团队协作
2. 富文本编辑器
项目名称 技术栈 核心特性 适用场景
TinyMCE JavaScript 功能全面（表格、代码、媒体嵌入）、插件生态丰富、支持云服务集成 企业级 CMS、复杂内容管理
Quill JavaScript/React/Vue 轻量（~40KB）、模块化设计、支持自定义格式和工具栏扩展 社交平台、评论系统
CKEditor JavaScript 企业级功能（协同编辑、OCR 图片转文字）、高度可定制、多语言支持 新闻网站、在线教育平台
WangEditor JavaScript/Vue/React 国产开源、零依赖、提供官方 Vue/React 封装，适合快速集成 国内企业项目、后台管理系统
3. 对比总结
• Markdown 编辑器：侧重语法解析与纯文本格式控制，适合开发者和技术写作场景。
• 富文本编辑器：强调所见即所得（WYSIWYG），适合非技术用户和复杂内容排版。
二、从零实现 Markdown 编辑器
1. 核心实现步骤
步骤 1：基础结构搭建
<div class="markdown-editor">
<textarea id="editor" placeholder="输入 Markdown 内容..."></textarea>
<div id="preview"></div>
</div>
步骤 2：引入解析库
• Marked.js：快速解析 Markdown 为 HTML。
• Highlight.js：代码块语法高亮。
import marked from 'marked';
import hljs from 'highlight.js';
步骤 3：实时渲染逻辑
const editor = document.getElementById('editor');
const preview = document.getElementById('preview');
editor.addEventListener('input', () => {
const markdownText = editor.value;
const html = marked(markdownText);
preview.innerHTML = hljs.highlightAuto(html).value; // 自动检测语言高亮
});
步骤 4：扩展功能
• 图片上传：通过 uploadImages 回调实现。
• 代码块扩展：支持语言标识和行号。
marked.setOptions({
highlight: (code, lang) => hljs.highlight(lang, code).value
});
2. 关键技术点
• 安全性：使用 DOMPurify 过滤 XSS 攻击。
• 性能优化：虚拟 DOM 或增量渲染（如 react-markdown 的 useMemo）。
• 主题定制：通过 CSS 覆盖默认样式（如代码块背景色、字体）。
三、从零实现富文本编辑器
1. 核心实现步骤
步骤 1：创建可编辑容器
<div id="richTextEditor" contenteditable="true"></div>
<div id="toolbar">
<button οnclick="formatText('bold')">加粗</button>
<button οnclick="insertLink()">插入链接</button>
</div>
步骤 2：实现基础格式控制
function formatText(command, value = null) {
document.execCommand(command, false, value);
// 同步滚动位置
const editor = document.getElementById('richTextEditor');
editor.focus();
editor.setSelectionRange(editor.selectionStart, editor.selectionEnd);
}
步骤 3：处理复杂操作
• 表格插入：通过 document.execCommand('insertHTML') 动态生成。
• 图片上传：监听拖拽事件，上传后插入 <img> 标签。
document.getElementById('editor').addEventListener('drop', (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
// 上传逻辑...
const imgUrl = 'https://example.com/image.jpg';
document.execCommand('insertHTML', false, `<img src="${imgUrl}">`);
});
步骤 4：选区与光标管理
• 使用 Range 和 Selection API 精准控制光标位置。
const selection = window.getSelection();
const range = selection.getRangeAt(0);
range.insertNode(document.createTextNode('新内容'));
2. 关键技术点
• 撤销/重做：通过保存历史状态（如 JSON.stringify(editor.innerHTML)）。
• 协同编辑：基于 WebSocket 实现实时同步（参考 ShareDB 库）。
• 插件系统：设计事件驱动架构，允许第三方扩展功能。
四、架构设计对比
维度 Markdown 编辑器 富文本编辑器
核心逻辑 Markdown 语法解析与渲染 内容操作（加粗、插入图片等）
性能瓶颈 大文件解析速度 复杂 DOM 操作与渲染
扩展性 通过插件添加新语法（如 PlantUML） 通过命令扩展自定义功能
安全性 防止 XSS（过滤 HTML 标签） 防止恶意脚本注入（内容白名单）
五、开发建议
1. Markdown 编辑器：
◦ 优先使用 marked + highlight.js 组合，快速实现基础功能。
◦ 复杂场景（如表格、任务列表）可集成 remark 生态。
2. 富文本编辑器：
◦ 轻量级需求：基于 contenteditable + execCommand。
◦ 企业级需求：使用 TinyMCE 或 CKEditor，避免重复造轮子。
3. 通用建议：
◦ 通过 npm 管理依赖，避免全局污染。
◦ 对移动端适配时，需处理虚拟键盘与光标位置偏移问题。
六、参考资源
• Markdown 解析库：marked.js(https://github.com/markedjs/marked) | Remark(https://github.com/remarkjs/remark)
• 富文本工具：TinyMCE 文档(https://www.tiny.cloud/docs/) | Quill API(https://quilljs.com/docs/)
• 安全方案：DOMPurify(https://github.com/cure53/DOMPurify)