前端开发 Markdown 编辑器与富文本编辑器详解

一、现有开源项目分析

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 嵌入专业写作工具、团队协作

富文本编辑器

项目名称技术栈核心特性适用场景

TinyMCE JavaScript 功能全面（表格、代码、媒体嵌入）、插件生态丰富、支持云服务集成企业级 CMS、复杂内容管理

Quill JavaScript/React/Vue 轻量（~40KB）、模块化设计、支持自定义格式和工具栏扩展社交平台、评论系统

CKEditor JavaScript 企业级功能（协同编辑、OCR 图片转文字）、高度可定制、多语言支持新闻网站、在线教育平台

WangEditor JavaScript/Vue/React 国产开源、零依赖、提供官方 Vue/React 封装，适合快速集成国内企业项目、后台管理系统

对比总结

• Markdown 编辑器：侧重语法解析与纯文本格式控制，适合开发者和技术写作场景。

• 富文本编辑器：强调所见即所得（WYSIWYG），适合非技术用户和复杂内容排版。

二、从零实现 Markdown 编辑器

核心实现步骤

步骤 1：基础结构搭建

</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

});

关键技术点

• 安全性：使用 DOMPurify 过滤 XSS 攻击。

• 性能优化：虚拟 DOM 或增量渲染（如 react-markdown 的 useMemo）。

• 主题定制：通过 CSS 覆盖默认样式（如代码块背景色、字体）。

三、从零实现富文本编辑器

核心实现步骤

步骤 1：创建可编辑容器

</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('新内容'));

关键技术点

• 撤销/重做：通过保存历史状态（如 JSON.stringify(editor.innerHTML)）。

• 协同编辑：基于 WebSocket 实现实时同步（参考 ShareDB 库）。

• 插件系统：设计事件驱动架构，允许第三方扩展功能。

四、架构设计对比

维度 Markdown 编辑器富文本编辑器

核心逻辑 Markdown 语法解析与渲染内容操作（加粗、插入图片等）

性能瓶颈大文件解析速度复杂 DOM 操作与渲染

扩展性通过插件添加新语法（如 PlantUML）通过命令扩展自定义功能

安全性防止 XSS（过滤 HTML 标签）防止恶意脚本注入（内容白名单）

五、开发建议

Markdown 编辑器：

◦ 优先使用 marked + highlight.js 组合，快速实现基础功能。

◦ 复杂场景（如表格、任务列表）可集成 remark 生态。

富文本编辑器：

◦ 轻量级需求：基于 contenteditable + execCommand。

◦ 企业级需求：使用 TinyMCE 或 CKEditor，避免重复造轮子。

通用建议：

◦ 通过 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)