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

最新推荐文章于 2025-05-02 04:08:11 发布

GISer_Jinger

最新推荐文章于 2025-05-02 04:08:11 发布

阅读量791

点赞数 16

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_55049655/article/details/147631513

版权

一、现有开源项目分析

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：基础结构搭建

步骤 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：创建可编辑容器

步骤 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)