diff --git a/docs/Cherry-Markdown-competitor-analysis.md b/docs/Cherry-Markdown-competitor-analysis.md new file mode 100644 index 000000000..891aba41c --- /dev/null +++ b/docs/Cherry-Markdown-competitor-analysis.md @@ -0,0 +1,493 @@ +# Cherry Markdown-competitor-analysis + +## 内容介绍 + +本项目是[2024腾讯犀牛鸟开源人才培养计划—Cherry Markdown](https://github.com/Tencent/OpenSourceTalent/issues/41)中的竞品分析任务。此次分析将从语法能力、功能、安全、性能、扩展能力以及引擎实现方式和二次开发难易程度等多个维度展开，全面对比 Cherry Markdown 与其他主要 Markdown 编辑器的差异。 + +## 文档结构 + +![Cherry Markdown竞品分析.png](https://s2.loli.net/2024/10/11/wiqPGYrQI4lAMDL.png) + + +## 1.Cherry Markdown项目简述 + +### 1.1 项目介绍 + +[Cherry Markdown Editor](https://github.com/Tencent/Cherry Markdown)是一款 **Javascript Markdown 编辑器**，具有**开箱即用、轻量简洁、易于扩展**等特点。它可以运行在**浏览器或服务端(NodeJs)。** + +![PixPin_2024-09-05_19-03-44.png](https://s2.loli.net/2024/09/09/gQCGNfY4Boyz8Rh.png) + +### 1.2 项目特性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Cherry Markdown 项目特性
开箱即用调用与实例化开发者可以使用非常简单的方式调用并实例化 Cherry Markdown 编辑器
默认支持支持大部分常用的 Markdown 语法（标题、目录、流程图、公式等）
易于拓展二次开发快速进行二次开发或功能扩展
纯 JavaScript 实现不依赖 angular、vue、react 等框架技术，框架只提供容器环境
语法特性图片缩放、对齐、引用
图表根据表格内容生成图表
字体颜色、大小
背景颜色、上标、下标
列表Checklist
媒体音视频
多种模式编辑预览双栏模式（支持同步滚动）
纯预览仅显示预览内容
+ +## 2.主要竞品概述 + +### 2.1 目前主要的竞品 + +确保所选竞品在技术实现和集成难度上具有可比性，我们精选了几款在社区中热度高、各项性能指标优秀、开源且具有良好可移植性的Web Markdown编辑器。 + +我们将这些编辑器分为四个明确的类别：框架集成型编辑器、多功能Markdown编辑器、所见即所得（WYSIWYG）编辑器以及轻量级与高性能编辑器。 + +> 各竞品的详情界面及链接展示见[[[Competitive product display]]](https://github.com/Zerwolrod/cherry-markdown-competitor-analysis/blob/analysis/docs/Competitive%20product%20display.md) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
竞品编辑器分类与特点
框架集成型编辑器-Vue.js 集成编辑器专为特定前端框架设计，提供与框架紧密集成的特性。mavonEditor
Vue Markdown Editor
md-editor-v3
多功能Markdown编辑器-图表与数学公式支持提供除基本Markdown编辑功能外的额外特性，如图表支持、数学公式等。ByteMD（支持Mermaid和KaTeX）
Editor.md（支持图表、数学公式、流程图）
所见即所得（WYSIWYG）编辑器提供类似于传统富文本编辑器的所见即所得编辑体验。tui.editor
轻量级与高性能编辑器注重性能和加载速度，适合对性能要求较高的应用场景。Vditor
+ +### 2.2 竞争力分析 + +鉴于项目均为开源编辑器，故对各竞品的竞争力采用star及forks数量对比来进行项目热度分析、采用last commit距今时间、issue及pull requsets数量对比来进行项目的活跃度分析，排序对比如下： + +**热度分析：** +![](https://s2.loli.net/2024/10/11/8VkE9H1gBwDvJeO.png) + +**活跃度分析：** +![image.png](https://s2.loli.net/2024/10/11/NpyjMFPJIlgmxot.png) + + +在热度分析中，为了避免因项目年限不同而导致的stars和forks数量积累的偏差，我们选择日均stars数量作为一个更为客观的衡量指标。这一指标有效地平衡了项目年限的影响，为我们提供了一个更加公平的比较基准。 + +根据这一指标，我们生成了以下排序图表，它直观地展示了各个Markdown编辑器项目的全球受欢迎程度。 + + +![image.png](https://s2.loli.net/2024/10/11/2zm8f1hPnus9CAI.png) + +从图表中可以明显看出，一些新兴项目虽然上线时间不长，但它们的日均stars数量已经超越了一些老牌项目，这表明了它们在短时间内迅速获得了开发者社区的认可和支持。 + +通过综合考量热度、活跃度指标，我们可以得出结论： + +对于Editor.md和tui.editor这样的成熟Markdown编辑器，它们凭借九年多的市场沉淀，已经建立了坚实的用户基础和良好的口碑。这些项目不仅在功能上日臻完善，而且在用户体验和社区支持方面也表现出色，这使得它们在开源markdown编辑器中保持了较高的活跃度和热度。 + +然而，在上线时间不足五年的众多新兴markdown编辑器中，Cherry Markdown通过积极的社区参与和持续的创新，凭借创新的语法功能特性和较高的拓展能力，也获得了众多开发者的青睐，在综合热度增长和活跃度指标上均位列第一，显示出其强大的市场竞争力和发展潜力。 + +## 3.语法能力对比 + +### 3.1 语法支持及特性 + +| 编辑器名称 | Markdown基础语法 | 额外语法特性 | +| ------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ByteMD | ✅ | 扩展语法如代码高亮、数学公式和Mermaid流程图等 | +| Mavon-Editor | ✅ | 图片上传事件和图片保存事件 | +| Editor.md | ✅ | 实时预览、图像上载、代码折叠、搜索替换 | +| Vditor | ✅ | GFM 语法：表格、任务列表项、删除线、自动链接、XSS 过滤、脚注、ToC、自定义标题 ID；图表语法：流程图、时序图、甘特图（Mermaid 支持）、Graphviz Graphviz （图形可视化）、折线图、饼图、脑图（ ECharts 支持）；五线谱（ abc.js 支持）；数学公式：数学公式块、行级数学公式（通过 MathJax 和 KaTeX 支持） | +| Vue-Markdown-editor | ✅ | - | +| Md-editor-v3 | ✅ | 深色主题、Prettier美化内容、直接渲染文章、图片粘贴上传、Mermaid图表和KaTeX数学公式 | +| tui.editor | ✅ | 语法高亮、图形展示、UML绘制 | +| Cherry Markdown | ✅ | 图片尺寸/阴影/边框/圆角；信息面板/手风琴；字体颜色/字体大小/对齐方式；图片缩放、表格自动生成图表、字体颜色和大小调整、音视频嵌入 | + +所有列出的编辑器都支持 Markdown 的基础语法，这意味着它们都能够处理标准的 Markdown 文本格式。 + +此外，相比于其他竞品，Cherry Markdown的额外语法支持选项，这可以极大简化创作流程，增强markdown文本可读性，使得其在文档的视觉呈现上具有更多的自定义能力，适合需要对文档外观进行精细控制的用户。然而由于缺乏语法支持，Cherry Markdown编辑器的额外语法支持也可能导致与其他编辑器不兼容的问题。 + +### 3.2 兼容性 + +| 特性 | Cherry Markdown Editor | ByteMD | Mavon-Editor | Editor.md | Vditor | Vue-Markdown-editor | Md-editor-v3 | tui.editor | +| -------------- | ------------------------------- | ------------------- | ------------ | ------------------------ | ----------------------------------------- | ------------------- | --------------------------- | ---------- | +| 框架兼容性 | 不依赖特定框架 | 专为现代JavaScript框架设计 | 专为Vue.js设计 | 作为一个独立的组件 | - | 专为Vue.js设计 | 专为Vue3开发 | 作为一个独立的编辑器 | +| 移动端兼容性 | 编辑栏和预览栏浏览良好，工具栏右侧部分溢出，无法浏览。布局美观 | 只能浏览编辑栏，工具栏无缺失，布局美观 | - | 编辑栏和预览栏浏览良好，工具栏无缺失，布局不美观 | 编辑栏浏览良好，工具栏无缺失，布局美观。但是切换到预览栏目后无法滑动浏览，浏览异常 | - | 只能浏览编辑栏，工具栏右侧部分溢出，无法浏览，布局正常 | - | +| 服务器端渲染(SSR)兼容性 | 支持 | 支持 | - | - | - | - | - | - | +| 编辑模式兼容性 | 所见即所得、分屏 | 所见即所得 | 所见即所得 | 所见即所得 | 所见即所得 | 所见即所得 | 所见即所得 | 所见即所得 | + + +> 移动端兼容测试机型：iPhone13，仅测试了有在线演示链接的编辑器 + +综上，Cherry Markdown相对比竞品，在各方面的兼容性十分优秀。同时，各测试的编辑器都在移动端存在浏览缺陷导致使用异常，但是Cherry Markdown仅存在工具栏部分溢出问题，可参考ByteMD、Editor.md、Vditor的解决方案，将工具栏进行响应式布局优化。 +## 4.功能对比 + +| 编辑器名称 | 功能特性 | +| ------------------- | ----------------------------------------------------------------------------------------------------------- | +| Cherry Markdown | 复制 Html 粘贴成 MD 语法、经典换行&常规换行、多光标编辑、图片尺寸、导出长图/pdf、float toolbar 在新行行首支持快速工具栏、bubble toolbar 选中文字时联想出快速工具栏 | +| ByteMD | 轻量级，不依赖于任何UI框架运行时bundle，易于适应其他库/框架插件系统，可扩展基本Markdown语法，如代码高亮、数学公式、Mermaid流程图等 | +| Mavon-Editor | 支持代码高亮、数学公式、表格、流程图、序列图、UML图、思维导图等、提供丰富的功能，包括图片点击预览、复制HTML粘贴成Markdown等 | +| Editor.md | 支持多种语言、代码高亮、图片上传、预览功能、支持自定义工具栏和快捷键、支持Markdown和HTML混排 | +| Vditor | 所见即所得/即时渲染/分屏预览模式；多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz、PlantUML 渲染；内置安全过滤、导出、图片懒加载、任务列表、多平台预览、多主题切换、复制到微信公众号/知乎功能 | +| Vue-Markdown-editor | 支持Markdown和HTML编辑、提供自定义插件和工具栏选项、支持代码高亮和图表渲染 | +| Md-editor-v3 | 支持基础的Markdown编辑和预览、支持图片上传、裁剪图片上传、支持暗黑主题和多光标编辑、提供API参考文档，支持内容格式化和屏幕全屏 | +| tui.editor | 所见即所得的Markdown编辑器、实时预览、语法高亮、自动生成目录索引、支持表格、UML图和图表等内容的编辑、支持多种主题和样式 | + +Cherry Markdown Editor在自定义功能和插件系统方面表现出色，具有别的浏览器没有的功能比如导出长图、信息面板/手风琴等等，非常适合需要高度定制化和编程功能的用户。 + +而其他编辑器也各有特点，比如Vditor可以实现复制到微信公众号和知乎功能，可以满足不同的使用场景和需求，Cherry Markdown编辑器在未来为了优化用户体验，也可以考虑引入同类竞品的个性化功能，打破功能垄断，提升竞争力。 + +## 5.性能对比 + +### 5.1 测试环境描述 + +为了确保性能测试的准确性和可比性，本次测试在相同的硬件和网络环境下进行。测试环境的具体配置如下： + +| 规格 | 详情 | +| ---- | ------------------ | +| 操作系统 | macOS Ventura 13.0 | +| 处理器 | Apple M1 Pro 芯片 | +| 内存 | 16GB | +| 存储 | 1TB 固态硬盘 | +| 网络 | 500Mbps 光纤宽带 | + +所有测试均在干净的环境中进行，关闭了所有非测试相关的应用程序，以避免外部因素对测试结果的影响。 + +### 5.2 局部渲染和更新 + +| 编辑器名称 | 局部渲染支持 | 局部更新支持 | 描述 | +| ---------------------- | ------ | ------ | -------------------------------------------------------- | +| Cherry Markdown Editor | ✅ | ✅ | 利用virtual dom机制，判断用户变更段落，只渲染变更段落，实现局部更新，减少浏览器DOM操作，提高性能。 | +| ByteMD | ✅ | ✅ | 支持局部渲染和更新，通过插件系统和优化的DOM操作实现。 | +| Mavon-Editor | ❌ | ❌ | 目前不支持局部渲染和更新，每次编辑都会重新渲染整个文档。 | +| Editor.md | ❌ | ❌ | 同样不支持局部渲染和更新，编辑时性能会受到一定影响。 | +| Vditor | ✅ | ✅ | 支持局部渲染和更新，特别是在所见即所得模式下表现良好。 | +| Vue-Markdown-editor | ❌ | ❌ | 作为Vue组件，目前不支持局部渲染和更新。 | +| Md-editor-v3 | ✅ | ✅ | 支持局部更新，但效果不如Cherry Markdown Editor和Vditor。 | +| tui.editor | ✅ | ✅ | 支持局部渲染和更新，性能表现良好。 | + +### 5.3 性能测试结果 + +通过对比在各种场景下的页面渲染速度来对比各种markdown插件的性能，我们将测试场景细分为以下三个关键维度：篇幅长短、内容复杂度、以及渲染类型。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
维度类别描述
篇幅长短1. 10kb以内适用于短小文档或文章的快速渲染。
2. 10kb～100kb适用于中等长度文档的渲染，平衡速度与功能。
3. 100kb以上适用于长篇文档，重点测试处理大量数据时的性能。
内容复杂度1. 纯文本仅包含基础文本内容，无额外Markdown语法元素。
2. 复杂文本包含多种Markdown语法元素，如标题、列表、代码块等。
渲染类型1.浏览重点测试文档浏览性能，适用于阅读场景。
2. 编辑重点测试文档编辑时的实时渲染性能。
+ +接下来我们根据**三个维度**设计了**12种不同情景**进行性能测试，**最终根据各种场景下的性能进行打分，并得出最终得分**。具体的测试过程整理见[[[cherry markdown performance testing]]](https://github.com/Zerwolrod/cherry-markdown-competitor-analysis/blob/analysis/docs/cherry%20markdown%20performance%20testing.md)，测试工程文件见[[[test]]](https://github.com/Zerwolrod/test)。 + +![](https://s2.loli.net/2024/10/11/CiMSO5d9XZkKl17.png) +![image.png](https://s2.loli.net/2024/10/11/Tk1K73bovqjHGRs.png) +![image.png](https://s2.loli.net/2024/10/11/9uQK1wWnZe4NRMC.png) +![image.png](https://s2.loli.net/2024/10/11/nl8xhYLI67DpU1M.png) +![image.png](https://s2.loli.net/2024/10/11/9SYsNZ3lUoitW6u.png) +![image.png](https://s2.loli.net/2024/10/11/b7HJOGluvDWwnke.png) +![image.png](https://s2.loli.net/2024/10/11/cH5ykBwRza2QZDU.png) + +我们综合以上数据为各个markdown编辑器按照0-10打分可以得出以下结论： + +**短篇简单评分** + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|cherry-markdown|38.3|20.12|29.21|9.75| +|tui.editor|47.05|38.29|42.67|9.45| +|md-editor-v3|56.24|46.63|51.44|9.05| +|mavonEditor|67.51|30.49|49.00|9.15| +|Vue Markdown Editor|73.26|46.29|59.78|8.75| +|Vditor|103.48|79.06|91.27|7.35| +|Editor.md|330.33|326.64|328.49|3.75| +|ByteMD|345.51|335.29|340.40|3.50| + +**短篇复杂评分** + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|cherry-markdown|38.3|20.12|29.21|9.75| +|tui.editor|47.05|38.29|42.67|9.45| +|md-editor-v3|56.24|46.63|51.44|9.05| +|mavonEditor|67.51|30.49|49.00|9.15| +|Vue Markdown Editor|73.26|46.29|59.78|8.75| +|Vditor|103.48|79.06|91.27|7.35| +|Editor.md|330.33|326.64|328.49|3.75| +|ByteMD|345.51|335.29|340.40|3.50| + +**中篇简单评分** + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|tui.editor|38.88|39.78|39.33|9.65| +|cherry-markdown|89.24|65.54|77.39|8.00| +|Editor.md|92.56|755.26|428.91|4.75| +|mavonEditor|110.56|95.83|103.20|7.00| +|md-editor-v3|157.37|137.25|147.31|5.75| +|ByteMD|170.46|153.12|161.79|5.25| +|Vditor|192.4|86.38|139.39|5.90| +|Vue Markdown Editor|198.25|104.62|151.44|5.40| + +**中篇复杂评分** + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|Editor.md|179.46|154.62|167.04|5.75| +|tui.editor|189.93|139.65|164.79|5.90| +|cherry-markdown|208.21|162.22|185.22|4.90| +|Vue Markdown Editor|221.63|161.31|191.47|4.75| +|md-editor-v3|245.13|162.36|203.75|4.45| +|mavonEditor|262.63|201.51|232.07|4.20| +|Vditor|291.28|308.86|300.07|3.50| +|ByteMD|315.25|256.62|285.94|3.75| + +**长篇简单评分** + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|Editor.md|672.52|1714.36|1193.44|2.90| +|md-editor-v3|713.26|1624.16|1168.71|3.10| +|cherry-markdown|782.28|2129.58|1450.93|2.45| +|mavonEditor|831.41|1724.61|1278.01|2.75| +|ByteMD|915.51|1815.24|1365.38|2.60| +|Vue Markdown Editor|1153.15|2915.42|2034.29|1.95| +|tui.editor|1457.76|2150.60|1804.18|2.10| +|Vditor|1854.10|5167.83|3510.97|1.00| + +**长篇复杂评分** + +| 项目名称 | 浏览渲染时长(ms) | 编辑渲染时长(ms) | 平均时长(ms) | 评分 | +| ------------------- | ---------- | ---------- | -------- | ---- | +| Editor.md | 1152.67 | 1712.51 | 1432.59 | 2.50 | +| Vditor | 1263.60 | 1937.27 | 1600.44 | 2.20 | +| mavonEditor | 1415.25 | 2621.13 | 2018.19 | 1.95 | +| tui.editor | 1486.27 | 1681.66 | 1583.97 | 2.25 | +| Vue Markdown Editor | 1514.52 | 1262.14 | 1388.33 | 2.60 | +| ByteMD | 1521.51 | 2611.25 | 2066.38 | 1.90 | +| cherry-markdown | 1533.16 | 711.02 | 1122.09 | 3.30 | +| md-editor-v3 | 2562.45 | 1523.51 | 2042.98 | 1.90 | + +> 注：由于测试小规模增删时间太短且要一直键盘操作，本测试的编辑速度是通过“向文本开头插入一段与原文本相同规模的文本的速度”来判断的。 + +> 由于vditor有默认的一秒延迟，记录的时候直接-1s进行测量。 + +## 6.安全对比 + +对于Markdown编辑器，主要面对的安全风险包括跨站脚本攻击（XSS）和数据泄露问题。具体见[[markdown editor security risks]]。针对这些安全风险，我们对各竞品选取了防XSS攻击、用户数据隔离两个指标作为对比，以评估它们的安全性能。 + +参考资料： +https://portswigger.net/web-security/cross-site-scripting +https://info.support.huawei.com/info-finder/encyclopedia/zh/DLP.html + +| 编辑器名称 | 防XSS攻击 | 用户数据隔离 | 备注 | +| ---------------------- | ------ | ------ | -------------------------- | +| Cherry Markdown Editor | ✅ | ✅ | 内置安全Hook，使用DomPurify进行过滤 | +| ByteMD | ✅ | ✅ | 默认安全，正确处理XSS攻击 | +| Mavon-Editor | ✅ | ✅ | 提供xssOptions配置，防止脚本注入 | +| Editor.md | ✅ | ❌ | 需要额外的安全措施，如不加载外部JavaScript | +| Vditor | ✅ | ✅ | 内置安全过滤，支持开关 | +| Vue-Markdown-editor | ✅ | ✅ | 高度可定制化，支持自定义安全设置 | +| Md-editor-v3 | ✅ | ✅ | 使用JSX和TypeScript开发，提供安全特性 | +| tui.editor | ✅ | ✅ | 所见即所得，提供实时预览和语法高亮 | + +在防XSS攻击方面，大多数编辑器都提供了一定程度的支持，如Cherry Markdown Editor使用DomPurify进行过滤，ByteMD和Mavon-Editor也提供了相应的安全配置。Vditor和Vue-Markdown-editor则提供了内置的安全过滤和高度可定制化的安全设置。Md-editor-v3利用JSX和TypeScript的优势，提供了安全特性。 + +除了Editor.md外，其他编辑器都提供了用户数据隔离支持。这表明大多数编辑器能够确保用户数据的隔离，防止潜在的数据泄露或污染。 + +Cherry Markdown Editor 内置了安全钩子，通过过滤白名单以及使用 DomPurify 进行扫描过滤，以防止 XSS 攻击等安全问题。这些安全措施的实施有助于保护用户数据免受XSS攻击和数据泄露的风险，同时也符合了数据丢失防护（DLP）的最佳实践，如Microsoft Security所定义的。通过这些措施，Markdown编辑器能够在保护数据安全的同时，提供高效的编辑体验。 + +## 7.拓展能力对比 + +### 7.1 插件系统 + +插件系统是扩展编辑器功能的重要方式，允许用户根据需要添加或修改编辑器的特定功能。以下是各编辑器在插件系统方面的表现： + +| 编辑器名称 | 插件数量 | 插件质量 | 备注 | +| ---------------------- | ---- | ---- | ------------------------------------------------------------------------- | +| Cherry Markdown Editor | 中 | 高 | 支持插件系统，提供钩子（hooks）和APIs，允许开发者注入自定义逻辑，支持多种样式主题选择。允许深度定制编辑器的外观和行为。 | +| ByteMD | 多样 | 高 | 通过插件系统，可以进行一定程度的外观和行为定制。支持语法高亮、数学公式、Mermaid流程图等插件。轻量级、框架无关，支持SSR，内置XSS处理。 | +| Mavon-Editor | 多样 | 中 | 主要针对Vue.js，外观定制灵活，但行为定制一般。支持自定义工具栏按钮，例如插入视频资源等。 | +| Editor.md | 多样 | 中 | 提供了一些基本的定制选项，但API丰富度一般。使用JSX和TypeScript开发，适合Vue3。 | +| Vditor | 多样 | 高 | 支持高度自定义，包括外观、行为以及扩展语言。支持自定义皮肤和主题，提供丰富的API接口和插件系统。 | +| Vue-Markdown-editor | 有限 | 中 | 作为Vue组件，外观定制灵活，但行为定制受限于Vue生态。支持Markdown和HTML编辑，提供自定义插件和工具栏选项。 | +| Md-editor-v3 | 中 | 中 | 支持高度自定义，包括主题切换、Prettier文本美化等。支持Vue3，使用TypeScript和JSX开发，支持国际化。 | +| tui.editor | 多样 | 高 | 提供了所见即所得编辑体验，外观和行为定制灵活。支持Markdown和HTML编辑，提供多种API，支持实时预览、语法高亮、自动生成目录索引等功能。 | + +### 7.2 自定义功能 + +自定义功能允许用户根据自己的需求调整编辑器的行为和外观。以下是各编辑器在自定义功能方面的表现： + +| 编辑器名称 | 外观定制 | API丰富度 | 备注 | +| ---------------------- | ---- | ------ | -------------------------------------------------------------------------------------------- | +| Cherry Markdown Editor | 高 | 高 | 支持插件系统，提供钩子（hooks）和APIs，允许开发者注入自定义逻辑，支持多种样式主题选择。允许深度定制编辑器的外观和行为。 | +| ByteMD | 中 | 高 | 通过插件系统，可以进行一定程度的外观和行为定制。支持语法高亮、数学公式、Mermaid流程图等插件。轻量级、框架无关，支持SSR，内置XSS处理。社区和个人开发者提供了丰富的自定义主题 | +| Mavon-Editor | 高 | 中 | 主要针对Vue.js，外观定制灵活，但行为定制一般。支持自定义工具栏按钮，例如插入视频资源等。 | +| Editor.md | 低 | 低 | 提供了一些基本的定制选项，但API丰富度一般。使用JSX和TypeScript开发，适合Vue3。 | +| Vditor | 高 | 高 | 支持高度自定义，包括外观、行为以及扩展语言。支持自定义皮肤和主题，提供丰富的API接口和插件系统。 | +| Vue-Markdown-editor | 高 | 中 | 作为Vue组件，外观定制灵活，但行为定制受限于Vue生态。支持Markdown和HTML编辑，提供自定义插件和工具栏选项。 | +| Md-editor-v3 | 高 | 高 | 支持高度自定义，包括主题切换、Prettier文本美化等。支持Vue3，使用TypeScript和JSX开发，支持国际化。 | +| tui.editor | 高 | 高 | 提供了所见即所得编辑体验，外观和行为定制灵活。支持Markdown和HTML编辑，提供多种API，支持实时预览、语法高亮、自动生成目录索引等功能。 | + +![image.png](https://s2.loli.net/2024/10/11/DpnFdIfHVQewJ16.png) + + +在插件系统和自定义评分中，我们的参考指标主要为插件数量和质量、外观定制程度、API丰富度四大标准。这些编辑器在自定义功能方面各有千秋，Cherry Markdown Editor和ByteMD以其插件系统和API丰富度而脱颖而出，支持开发者通过编写自定义插件来扩展编辑器的功能。允许开发者在运行时注入自定义逻辑，满足特定需求。适合需要高度定制化的场景。虽然相较于有很长时间积淀的老牌markdown编辑器项目的还具有一定的成长空间，但是在新兴的markdown编辑器中已展现出良好的拓展能力。 + +## 8.引擎实现方式 + +技术栈的选择对于一个项目至关重要，其不仅是构建应用的基石，更是影响应用性能、可扩展性和可维护性的关键因素。对于Markdown编辑器而言，技术栈的选择尤为精细，因为它需要在提供丰富功能的同时，确保用户体验的流畅性和编辑器本身的高效性。 + +以下是我们对各Markdown编辑器技术栈的详细分析： + +| 编辑器名称 | 前端框架/库 | 渲染引擎 | 解析器 | 扩展机制 | 存储方式 | 备注 | +| ---------------------- | ------ | --------------- | --------------- | ---- | ----- | ----------------------------------- | +| Cherry Markdown Editor | 无 | 自定义 | 自定义 | API | 本地/远程 | 不依赖特定前端框架，使用纯JavaScript编写。 | +| ByteMD | Svelte | 自定义（基于Svelte） | 基于remark和rehype | 插件系统 | 本地 | 轻量级、框架无关，支持 SSR，内置XSS处理。 | +| Mavon-Editor | Vue.js | 自定义（基于Vue.js） | Markdown-it | 插件系统 | 本地 | 支持Vue2和Vue3，提供丰富的API和工具栏自定义。 | +| Editor.md | jQuery | CodeMirror | Marked | 插件系统 | 本地 | 使用JSX和TypeScript开发，适合Vue3。 | +| Vditor | 无 | 自定义（基于Electron） | 基于markdown-it | 插件系统 | 本地/远程 | 所见即所得编辑体验，高效且可扩展。 | +| Vue-Markdown-editor | Vue.js | 无 | 无 | 无 | 本地 | Vue组件，简单易用。 | +| Md-editor-v3 | Vue.js | CodeMirror | marked.js | 插件系统 | 本地 | 支持Vue3，使用TypeScript和JSX开发，支持国际化。 | +| tui.editor | 无 | 自定义 | 自定义 | API | 本地 | 基于jQuery，支持Markdown和HTML编辑，提供多种API。 | + +Cherry Markdown不依赖于任何特定的前端框架，采用纯JavaScript开发，同时采用了模块化的架构设计，允许代码被组织成独立的、可重用的单元，从而提高了代码的可维护性和可扩展性。 + +模块化架构还促进了功能隔离，使得各个模块可以独立开发和测试，允许开发者通过简单的API调用快速集成编辑器到各种应用场景中。 + +## 9.二开难易程度 + +由于文档和社区支持可以快速帮助开发者理解和使用API和插件系统，提供良好的学习交流平台，降低二开的阻碍，API易用程度和支持拓展语言则直接影响了二开的耗时和可行性。 + +因此，在讨论二开难易程度时，我们将文档和社区支持、API易用性和拓展语言支持作为衡量二开难易程度的指标。其中，社区支持程度由之前的活跃度分析数据得出。 + +| 编辑器名称 | 文档完整性 | 社区支持 | API易用性 | 扩展语言支持 | 备注 | +| ---------------------- | ----- | ---- | ------ | ------------------------ | ------------------------------------------------------------------- | +| Cherry Markdown Editor | 高 | 活跃 | 高 | 支持JavaScript | 提供了丰富的API文档和配置选项，支持多种编辑模式和插件系统，API设计直观，适用于需要高度定制化的场景 | +| ByteMD | 高 | 活跃 | 高 | 支持JavaScript, TypeScript | 提供了详细的安装和使用指南，以及丰富的示例和插件支持。API易用，支持高度定制化。 | +| Mavon-Editor | 中 | 活跃 | 中 | 支持JavaScript | 专为Vue.js框架设计的Markdown编辑器，提供了基本的文档和示例，但社区支持相对较少，对于Vue开发者来说学习难度较低。 | +| Editor.md | 高 | 中 | 中 | 支持JavaScript | 支持多种主题和插件，拥有活跃的社区和良好的官方支持，适用于多种应用场景。API一般，定制化难度适中。 | +| Vditor | 高 | 活跃 | 高 | 支持JavaScript, TypeScript | 提供了详细的文档和丰富的示例，社区支持良好。API设计优秀，定制化灵活，学习曲线低。 | +| Vue-Markdown-editor | 中 | 中 | 中 | 支持JavaScript | Vue组件简单易用，但文档和社区支持相对较少。作为Vue组件，对于Vue开发者来说使用简单。易于集成 | +| Md-editor-v3 | 中 | 低 | 中 | 中 | 社区讨论及支持不足，但文档攥写比较规范，清晰易懂 | +| tui.editor | 高 | 活跃 | 高 | 支持JavaScript | 基于jQuery，支持Markdown和HTML编辑，提供了详细的文档和API，社区支持良好。API设计优秀，定制化灵活，学习曲线低。 | + +![image.png](https://s2.loli.net/2024/10/11/Sg27GPtZNfUA4aq.png) + + +综上，cherry-markdonw的提供了较为丰富的文档和良好的社区支持，二开难度小，易于用户进行自定义开发。 + +## 10.总结 + +在对Cherry Markdown Editor及其主要竞品进行全面分析后，我们可以得出以下结论： + +Editor.md和tui.editor等成熟项目凭借多年的市场沉淀，维持了较高的活跃度和热度。而Cherry Markdown Editor在新兴项目中表现出色，日均stars数量超越了一些老牌项目，显示出其强大的市场竞争力和发展潜力。 + +在功能方面，CherryMarkdown支持丰富的额外语法特性，如图片尺寸调整、信息面板等，同时在自定义功能和插件系统方面表现出色，适合需要高度定制化的用户。移动端出现了工具栏右侧溢出问题，可以考虑进行优化。 + +而在性能上，各编辑器在加载时间、首次渲染时间和编辑操作响应时间上表现相近，CherryMarkdownEditor在局部渲染和更新方面表现良好。 + +安全方面，它提供了防XSS攻击和用户数据隔离的支持，通过内置安全钩子和DomPurify过滤，确保了编辑器的安全性。 + +拓展能力方面，CherryMarkdownEditor的插件系统和APl丰富度表现优秀，提供了丰富的自定义选项和扩展语言支持，适合开发者进行二次开发。在未来也可也借鉴学习其他优秀开源markdown编辑器的功能，提高产品竞争力。 + +CherryMarkdown采用纯JavaScript开发，模块化的架构设计提高了代码的可维护性和可扩展性。Cherry MarkdownEditor提供了丰富的文档和良好的社区支持，降低了二次开发的难度，易于用户进行自定义开发。 + +综上，Cherry Markdown Editor在多个维度上展现出了强大的竞争力，特别是在语法能力、功能丰富度、安全性能和拓展能力方面。虽然作为一个较新的项目，它在社区支持和成熟度方面还有提升空间，但其创新的特性和积极的社区参与表明，它有潜力成为市场上的领先Markdown编辑器之一。对于寻求高度定制化和现代化编辑体验的用户来说，Cherry Markdown Editor无疑是一个值得考虑的选择。 + +![image.png](https://s2.loli.net/2024/10/11/RYmjalLJbMAPf6S.png) + + + +以上为我的本次竞品分析项目内容，请各位导师批评指正。 diff --git a/docs/Competitive product display.md b/docs/Competitive product display.md new file mode 100644 index 000000000..042de27f6 --- /dev/null +++ b/docs/Competitive product display.md @@ -0,0 +1,29 @@ + +1.[Mavon-Editor](https://github.com/hinesboy/mavonEditor)![](https://img.shields.io/github/stars/hinesboy/mavonEditor.svg?style=social&label=Star&maxAge=2592000)：一个基于Vue的Markdown编辑器库，提供了所见即所得的编辑体验，提供了丰富的功能，既可以用于编辑也可以用于解析。它支持标题、图片、备注、代码块、无序列表、有序列表、链接、表格等Markdown标签，并且对代码块和备注的支持较好。 + +![image.png](https://s2.loli.net/2024/09/09/2Olr56Qh8LpRfWo.png) + + +2.[Vue-Markdown-editor](https://github.com/code-farmer-i/vue-Markdown-editor)![](https://img.shields.io/github/stars/code-farmer-i/vue-markdown-editor.svg?style=social&label=Star&maxAge=2592000)：这是一个基于Vue开发的Markdown编辑器组件。[在线演示](https://code-farmer-i.github.io/vue-markdown-editor/examples/base-editor.html#import) +![image.png](https://s2.loli.net/2024/09/09/dI65CfA3jsP7BoS.png) + + +3.[Md-editor-v3](https://github.com/imzbf/md-editor-v3)![](https://img.shields.io/github/stars/imzbf/md-editor-v3.svg?style=social&label=Star&maxAge=2592000)：这是一个Markdown编辑器的Vue3版本，使用JSX和TypeScript语法开发，支持切换主题、Prettier美化文本等。 +[在线演示](https://imzbf.github.io/md-editor-v3/en-US/index) +![image.png](https://s2.loli.net/2024/09/09/aeon5c87TVY2stK.png) + + +4.[ByteMD](https://github.com/bytedance/bytemd?tab=readme-ov-file)![](https://img.shields.io/github/stars/pd4d10/bytemd.svg?style=social&label=Star&maxAge=2592000): 由字节跳动旗下掘金社区出品的轻量级、扩展性强的Markdown编辑器JavaScript库。它不需要导入任何UI Framework包，可以用于React、Vue和Angular等框架。ByteMD内置了基本Markdown语法的扩展插件系统，支持代码语法高亮显示、数学公式和流程图等。它还处理了常见的跨网站脚本攻击，兼容SSR。[在线演示](https://bytemd.js.org/playground/) +![image.png](https://s2.loli.net/2024/09/09/wPcyiXKYRW4UFEI.png) + + +5.[Editor.md](https://github.com/pandao/editor.md)![](https://img.shields.io/github/stars/pandao/editor.md.svg?style=social&label=Star&maxAge=2592000)：这是一个基于CodeMirror、jQuery和Marked的开源可嵌入在线Markdown编辑器（组件）。它支持实时预览、图像上载、预格式化文本/代码块/表格插入、代码折叠、搜索替换、只读、主题、多语言、HTML实体、代码语法突出显示等功能。[在线演示](http://editor.md.ipandao.com/) +![image.png](https://s2.loli.net/2024/09/09/krlFqvn1CG7ZASa.png) + + +6.[tui.editor](https://github.com/nhn/tui.editor)![](https://img.shields.io/github/stars/nhn/tui.editor.svg?style=social&label=Star&maxAge=2592000)：TOAST UI Editor是一个Markdown所见即所得编辑器，高效且可扩展。[在线演示](https://ui.toast.com/tui-editor) +![image.png](https://s2.loli.net/2024/09/09/pLgE9RzOd1PaUHl.png) + + +7.[Vditor](https://github.com/Vanessa219/vditor)![](https://img.shields.io/github/stars/Vanessa219/vditor.svg?style=social&label=Star&maxAge=2592000)：这是一款浏览器端的Markdown编辑器，支持所见即所得（富文本）、即时渲染（类似Typora）和分屏预览模式。[在线演示](https://ld246.com/guide/markdown) +![image.png](https://s2.loli.net/2024/09/09/27HPx9szteAIYNm.png) diff --git a/docs/Competitor-Analysis.md b/docs/Competitor-Analysis.md new file mode 100644 index 000000000..845480dbb --- /dev/null +++ b/docs/Competitor-Analysis.md @@ -0,0 +1,490 @@ +# Cherry Markdown-competitor-analysis + +## 内容介绍 + +本项目是[2024腾讯犀牛鸟开源人才培养计划—Cherry Markdown](https://github.com/Tencent/OpenSourceTalent/issues/41)中的竞品分析任务。此次分析将从语法能力、功能、安全、性能、扩展能力以及引擎实现方式和二次开发难易程度等多个维度展开，全面对比 Cherry Markdown 与其他主要 Markdown 编辑器的差异。 + +## 文档结构 + +![Cherry Markdown竞品分析.png](https://s2.loli.net/2024/10/11/wiqPGYrQI4lAMDL.png) + + +## 1.Cherry Markdown项目简述 + +### 1.1 项目介绍 + +[Cherry Markdown Editor](https://github.com/Tencent/Cherry Markdown)是一款 **Javascript Markdown 编辑器**，具有**开箱即用、轻量简洁、易于扩展**等特点。它可以运行在**浏览器或服务端(NodeJs)。** + +![PixPin_2024-09-05_19-03-44.png](https://s2.loli.net/2024/09/09/gQCGNfY4Boyz8Rh.png) + +### 1.2 项目特性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Cherry Markdown 项目特性
开箱即用调用与实例化开发者可以使用非常简单的方式调用并实例化 Cherry Markdown 编辑器
默认支持支持大部分常用的 Markdown 语法（标题、目录、流程图、公式等）
易于拓展二次开发快速进行二次开发或功能扩展
纯 JavaScript 实现不依赖 angular、vue、react 等框架技术，框架只提供容器环境
语法特性图片缩放、对齐、引用
图表根据表格内容生成图表
字体颜色、大小
背景颜色、上标、下标
列表Checklist
媒体音视频
多种模式编辑预览双栏模式（支持同步滚动）
纯预览仅显示预览内容
+ +## 2.主要竞品概述 + +### 2.1 目前主要的竞品 + +确保所选竞品在技术实现和集成难度上具有可比性，我们精选了几款在社区中热度高、各项性能指标优秀、开源且具有良好可移植性的Web Markdown编辑器。 + +我们将这些编辑器分为四个明确的类别：框架集成型编辑器、多功能Markdown编辑器、所见即所得（WYSIWYG）编辑器以及轻量级与高性能编辑器。 + +> 各竞品的详情界面及链接展示见[[Competitive product display]] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
竞品编辑器分类与特点
框架集成型编辑器-Vue.js 集成编辑器专为特定前端框架设计，提供与框架紧密集成的特性。mavonEditor
Vue Markdown Editor
md-editor-v3
多功能Markdown编辑器-图表与数学公式支持提供除基本Markdown编辑功能外的额外特性，如图表支持、数学公式等。ByteMD（支持Mermaid和KaTeX）
Editor.md（支持图表、数学公式、流程图）
所见即所得（WYSIWYG）编辑器提供类似于传统富文本编辑器的所见即所得编辑体验。tui.editor
轻量级与高性能编辑器注重性能和加载速度，适合对性能要求较高的应用场景。Vditor
+ +### 2.2 竞争力分析 + +鉴于项目均为开源编辑器，故对各竞品的竞争力采用star及forks数量对比来进行项目热度分析、采用last commit距今时间、issue及pull requsets数量对比来进行项目的活跃度分析，排序对比如下： + +**热度分析：** +![](https://s2.loli.net/2024/10/11/8VkE9H1gBwDvJeO.png) + +**活跃度分析：** +![image.png](https://s2.loli.net/2024/10/11/NpyjMFPJIlgmxot.png) + + +在热度分析中，为了避免因项目年限不同而导致的stars和forks数量积累的偏差，我们选择日均stars数量作为一个更为客观的衡量指标。这一指标有效地平衡了项目年限的影响，为我们提供了一个更加公平的比较基准。 + +根据这一指标，我们生成了以下排序图表，它直观地展示了各个Markdown编辑器项目的全球受欢迎程度。 + + +![image.png](https://s2.loli.net/2024/10/11/2zm8f1hPnus9CAI.png) + +从图表中可以明显看出，一些新兴项目虽然上线时间不长，但它们的日均stars数量已经超越了一些老牌项目，这表明了它们在短时间内迅速获得了开发者社区的认可和支持。 + +通过综合考量热度、活跃度指标，我们可以得出结论： + +对于Editor.md和tui.editor这样的成熟Markdown编辑器，它们凭借九年多的市场沉淀，已经建立了坚实的用户基础和良好的口碑。这些项目不仅在功能上日臻完善，而且在用户体验和社区支持方面也表现出色，这使得它们在开源markdown编辑器中保持了较高的活跃度和热度。 + +然而，在上线时间不足五年的众多新兴markdown编辑器中，Cherry Markdown通过积极的社区参与和持续的创新，凭借创新的语法功能特性和较高的拓展能力，也获得了众多开发者的青睐，在综合热度增长和活跃度指标上均位列第一，显示出其强大的市场竞争力和发展潜力。 + +## 3.语法能力对比 + +### 3.1 语法支持及特性 + +| 编辑器名称 | Markdown基础语法 | 额外语法特性 | +| ------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ByteMD | ✅ | 扩展语法如代码高亮、数学公式和Mermaid流程图等 | +| Mavon-Editor | ✅ | 图片上传事件和图片保存事件 | +| Editor.md | ✅ | 实时预览、图像上载、代码折叠、搜索替换 | +| Vditor | ✅ | GFM 语法：表格、任务列表项、删除线、自动链接、XSS 过滤、脚注、ToC、自定义标题 ID；图表语法：流程图、时序图、甘特图（Mermaid 支持）、Graphviz Graphviz （图形可视化）、折线图、饼图、脑图（ ECharts 支持）；五线谱（ abc.js 支持）；数学公式：数学公式块、行级数学公式（通过 MathJax 和 KaTeX 支持） | +| Vue-Markdown-editor | ✅ | - | +| Md-editor-v3 | ✅ | 深色主题、Prettier美化内容、直接渲染文章、图片粘贴上传、Mermaid图表和KaTeX数学公式 | +| tui.editor | ✅ | 语法高亮、图形展示、UML绘制 | +| Cherry Markdown | ✅ | 图片尺寸/阴影/边框/圆角；信息面板/手风琴；字体颜色/字体大小/对齐方式；图片缩放、表格自动生成图表、字体颜色和大小调整、音视频嵌入 | + +所有列出的编辑器都支持 Markdown 的基础语法，这意味着它们都能够处理标准的 Markdown 文本格式。 + +此外，相比于其他竞品，Cherry Markdown的额外语法支持选项，这可以极大简化创作流程，增强markdown文本可读性，使得其在文档的视觉呈现上具有更多的自定义能力，适合需要对文档外观进行精细控制的用户。然而由于缺乏语法支持，Cherry Markdown编辑器的额外语法支持也可能导致与其他编辑器不兼容的问题。 + +### 3.2 兼容性 + +| 特性 | Cherry Markdown Editor | ByteMD | Mavon-Editor | Editor.md | Vditor | Vue-Markdown-editor | Md-editor-v3 | tui.editor | +| -------------- | ------------------------------- | ------------------- | ------------ | ------------------------ | ----------------------------------------- | ------------------- | --------------------------- | ---------- | +| 框架兼容性 | 不依赖特定框架 | 专为现代JavaScript框架设计 | 专为Vue.js设计 | 作为一个独立的组件 | - | 专为Vue.js设计 | 专为Vue3开发 | 作为一个独立的编辑器 | +| 移动端兼容性 | 编辑栏和预览栏浏览良好，工具栏右侧部分溢出，无法浏览。布局美观 | 只能浏览编辑栏，工具栏无缺失，布局美观 | - | 编辑栏和预览栏浏览良好，工具栏无缺失，布局不美观 | 编辑栏浏览良好，工具栏无缺失，布局美观。但是切换到预览栏目后无法滑动浏览，浏览异常 | - | 只能浏览编辑栏，工具栏右侧部分溢出，无法浏览，布局正常 | - | +| 服务器端渲染(SSR)兼容性 | 支持 | 支持 | - | - | - | - | - | - | +| 编辑模式兼容性 | 所见即所得、分屏 | 所见即所得 | 所见即所得 | 所见即所得 | 所见即所得 | 所见即所得 | 所见即所得 | 所见即所得 | + + +> 移动端兼容测试机型：iPhone13，仅测试了有在线演示链接的编辑器 + +综上，Cherry Markdown相对比竞品，在各方面的兼容性十分优秀。同时，各测试的编辑器都在移动端存在浏览缺陷导致使用异常，但是Cherry Markdown仅存在工具栏部分溢出问题，可参考ByteMD、Editor.md、Vditor的解决方案，将工具栏进行响应式布局优化。 +## 4.功能对比 + +| 编辑器名称 | 功能特性 | +| ------------------- | ----------------------------------------------------------------------------------------------------------- | +| Cherry Markdown | 复制 Html 粘贴成 MD 语法、经典换行&常规换行、多光标编辑、图片尺寸、导出长图/pdf、float toolbar 在新行行首支持快速工具栏、bubble toolbar 选中文字时联想出快速工具栏 | +| ByteMD | 轻量级，不依赖于任何UI框架运行时bundle，易于适应其他库/框架插件系统，可扩展基本Markdown语法，如代码高亮、数学公式、Mermaid流程图等 | +| Mavon-Editor | 支持代码高亮、数学公式、表格、流程图、序列图、UML图、思维导图等、提供丰富的功能，包括图片点击预览、复制HTML粘贴成Markdown等 | +| Editor.md | 支持多种语言、代码高亮、图片上传、预览功能、支持自定义工具栏和快捷键、支持Markdown和HTML混排 | +| Vditor | 所见即所得/即时渲染/分屏预览模式；多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz、PlantUML 渲染；内置安全过滤、导出、图片懒加载、任务列表、多平台预览、多主题切换、复制到微信公众号/知乎功能 | +| Vue-Markdown-editor | 支持Markdown和HTML编辑、提供自定义插件和工具栏选项、支持代码高亮和图表渲染 | +| Md-editor-v3 | 支持基础的Markdown编辑和预览、支持图片上传、裁剪图片上传、支持暗黑主题和多光标编辑、提供API参考文档，支持内容格式化和屏幕全屏 | +| tui.editor | 所见即所得的Markdown编辑器、实时预览、语法高亮、自动生成目录索引、支持表格、UML图和图表等内容的编辑、支持多种主题和样式 | +Cherry Markdown Editor在自定义功能和插件系统方面表现出色，具有别的浏览器没有的功能比如导出长图、信息面板/手风琴等等，非常适合需要高度定制化和编程功能的用户。 + +而其他编辑器也各有特点，比如Vditor可以实现复制到微信公众号和知乎功能，可以满足不同的使用场景和需求，Cherry Markdown编辑器在未来为了优化用户体验，也可以考虑引入同类竞品的个性化功能，打破功能垄断，提升竞争力。 + +## 5.性能对比 + +### 5.1 测试环境描述 + +为了确保性能测试的准确性和可比性，本次测试在相同的硬件和网络环境下进行。测试环境的具体配置如下： + +| 规格 | 详情 | +| ---- | ------------------ | +| 操作系统 | macOS Ventura 13.0 | +| 处理器 | Apple M1 Pro 芯片 | +| 内存 | 16GB | +| 存储 | 1TB 固态硬盘 | +| 网络 | 500Mbps 光纤宽带 | + +所有测试均在干净的环境中进行，关闭了所有非测试相关的应用程序，以避免外部因素对测试结果的影响。 + +### 5.2 局部渲染和更新 + +| 编辑器名称 | 局部渲染支持 | 局部更新支持 | 描述 | +| ---------------------- | ------ | ------ | -------------------------------------------------------- | +| Cherry Markdown Editor | ✅ | ✅ | 利用virtual dom机制，判断用户变更段落，只渲染变更段落，实现局部更新，减少浏览器DOM操作，提高性能。 | +| ByteMD | ✅ | ✅ | 支持局部渲染和更新，通过插件系统和优化的DOM操作实现。 | +| ==Mavon-Editor== | ❌ | ❌ | 目前不支持局部渲染和更新，每次编辑都会重新渲染整个文档。 | +| Editor.md | ❌ | ❌ | 同样不支持局部渲染和更新，编辑时性能会受到一定影响。 | +| Vditor | ✅ | ✅ | 支持局部渲染和更新，特别是在所见即所得模式下表现良好。 | +| Vue-Markdown-editor | ❌ | ❌ | 作为Vue组件，目前不支持局部渲染和更新。 | +| Md-editor-v3 | ✅ | ✅ | 支持局部更新，但效果不如Cherry Markdown Editor和Vditor。 | +| tui.editor | ✅ | ✅ | 支持局部渲染和更新，性能表现良好。 | + +### 5.3 性能测试结果 + +通过对比在各种场景下的页面渲染速度来对比各种markdown插件的性能，我们将测试场景细分为以下三个关键维度：篇幅长短、内容复杂度、以及渲染类型。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
维度类别描述
篇幅长短1. 10kb以内适用于短小文档或文章的快速渲染。
2. 10kb～100kb适用于中等长度文档的渲染，平衡速度与功能。
3. 100kb以上适用于长篇文档，重点测试处理大量数据时的性能。
内容复杂度1. 纯文本仅包含基础文本内容，无额外Markdown语法元素。
2. 复杂文本包含多种Markdown语法元素，如标题、列表、代码块等。
渲染类型1.浏览重点测试文档浏览性能，适用于阅读场景。
2. 编辑重点测试文档编辑时的实时渲染性能。
+ +接下来我们根据**三个维度**设计了**12种不同情景**进行性能测试，**最终根据各种场景下的性能进行打分，并得出最终得分**。具体的测试过程整理见[[[cherry markdown performance testing]]](https://github.com/Zerwolrod/cherry-markdown-competitor-analysis/blob/analysis/docs/cherry%20markdown%20performance%20testing.md)，测试工程文件见[[[test]]](https://github.com/Zerwolrod/test)。 + +![](https://s2.loli.net/2024/10/11/CiMSO5d9XZkKl17.png) +![image.png](https://s2.loli.net/2024/10/11/Tk1K73bovqjHGRs.png) +![image.png](https://s2.loli.net/2024/10/11/9uQK1wWnZe4NRMC.png) +![image.png](https://s2.loli.net/2024/10/11/nl8xhYLI67DpU1M.png) +![image.png](https://s2.loli.net/2024/10/11/9SYsNZ3lUoitW6u.png) +![image.png](https://s2.loli.net/2024/10/11/b7HJOGluvDWwnke.png) +![image.png](https://s2.loli.net/2024/10/11/cH5ykBwRza2QZDU.png) + +我们综合以上数据为各个markdown编辑器按照0-10打分可以得出以下结论： +### 短篇简单评分 + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|cherry-markdown|38.3|20.12|29.21|9.75| +|tui.editor|47.05|38.29|42.67|9.45| +|md-editor-v3|56.24|46.63|51.44|9.05| +|mavonEditor|67.51|30.49|49.00|9.15| +|Vue Markdown Editor|73.26|46.29|59.78|8.75| +|Vditor|103.48|79.06|91.27|7.35| +|Editor.md|330.33|326.64|328.49|3.75| +|ByteMD|345.51|335.29|340.40|3.50| + +### 短篇复杂评分 + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|cherry-markdown|38.3|20.12|29.21|9.75| +|tui.editor|47.05|38.29|42.67|9.45| +|md-editor-v3|56.24|46.63|51.44|9.05| +|mavonEditor|67.51|30.49|49.00|9.15| +|Vue Markdown Editor|73.26|46.29|59.78|8.75| +|Vditor|103.48|79.06|91.27|7.35| +|Editor.md|330.33|326.64|328.49|3.75| +|ByteMD|345.51|335.29|340.40|3.50| + +### 中篇简单评分 + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|tui.editor|38.88|39.78|39.33|9.65| +|cherry-markdown|89.24|65.54|77.39|8.00| +|Editor.md|92.56|755.26|428.91|4.75| +|mavonEditor|110.56|95.83|103.20|7.00| +|md-editor-v3|157.37|137.25|147.31|5.75| +|ByteMD|170.46|153.12|161.79|5.25| +|Vditor|192.4|86.38|139.39|5.90| +|Vue Markdown Editor|198.25|104.62|151.44|5.40| + +### 中篇复杂评分 + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|Editor.md|179.46|154.62|167.04|5.75| +|tui.editor|189.93|139.65|164.79|5.90| +|cherry-markdown|208.21|162.22|185.22|4.90| +|Vue Markdown Editor|221.63|161.31|191.47|4.75| +|md-editor-v3|245.13|162.36|203.75|4.45| +|mavonEditor|262.63|201.51|232.07|4.20| +|Vditor|291.28|308.86|300.07|3.50| +|ByteMD|315.25|256.62|285.94|3.75| + +### 长篇简单评分 + +|项目名称|浏览渲染时长(ms)|编辑渲染时长(ms)|平均时长(ms)|评分| +|---|---|---|---|---| +|Editor.md|672.52|1714.36|1193.44|2.90| +|md-editor-v3|713.26|1624.16|1168.71|3.10| +|cherry-markdown|782.28|2129.58|1450.93|2.45| +|mavonEditor|831.41|1724.61|1278.01|2.75| +|ByteMD|915.51|1815.24|1365.38|2.60| +|Vue Markdown Editor|1153.15|2915.42|2034.29|1.95| +|tui.editor|1457.76|2150.60|1804.18|2.10| +|Vditor|1854.10|5167.83|3510.97|1.00| + +### 长篇复杂评分 + +| 项目名称 | 浏览渲染时长(ms) | 编辑渲染时长(ms) | 平均时长(ms) | 评分 | +| ------------------- | ---------- | ---------- | -------- | ---- | +| Editor.md | 1152.67 | 1712.51 | 1432.59 | 2.50 | +| Vditor | 1263.60 | 1937.27 | 1600.44 | 2.20 | +| mavonEditor | 1415.25 | 2621.13 | 2018.19 | 1.95 | +| tui.editor | 1486.27 | 1681.66 | 1583.97 | 2.25 | +| Vue Markdown Editor | 1514.52 | 1262.14 | 1388.33 | 2.60 | +| ByteMD | 1521.51 | 2611.25 | 2066.38 | 1.90 | +| cherry-markdown | 1533.16 | 711.02 | 1122.09 | 3.30 | +| md-editor-v3 | 2562.45 | 1523.51 | 2042.98 | 1.90 | + +> 注：由于测试小规模增删时间太短且要一直键盘操作，本测试的编辑速度是通过“向文本开头插入一段与原文本相同规模的文本的速度”来判断的。 + +> 由于vditor有默认的一秒延迟，记录的时候直接-1s进行测量。 + +## 6.安全对比 + +对于Markdown编辑器，主要面对的安全风险包括跨站脚本攻击（XSS）和数据泄露问题。具体见[[markdown editor security risks]]。针对这些安全风险，我们对各竞品选取了防XSS攻击、用户数据隔离两个指标作为对比，以评估它们的安全性能。 + +参考资料： +https://portswigger.net/web-security/cross-site-scripting +https://info.support.huawei.com/info-finder/encyclopedia/zh/DLP.html + +| 编辑器名称 | 防XSS攻击 | 用户数据隔离 | 备注 | +| ---------------------- | ------ | ------ | -------------------------- | +| Cherry Markdown Editor | ✅ | ✅ | 内置安全Hook，使用DomPurify进行过滤 | +| ByteMD | ✅ | ✅ | 默认安全，正确处理XSS攻击 | +| Mavon-Editor | ✅ | ✅ | 提供xssOptions配置，防止脚本注入 | +| Editor.md | ✅ | ❌ | 需要额外的安全措施，如不加载外部JavaScript | +| Vditor | ✅ | ✅ | 内置安全过滤，支持开关 | +| Vue-Markdown-editor | ✅ | ✅ | 高度可定制化，支持自定义安全设置 | +| Md-editor-v3 | ✅ | ✅ | 使用JSX和TypeScript开发，提供安全特性 | +| tui.editor | ✅ | ✅ | 所见即所得，提供实时预览和语法高亮 | + +在防XSS攻击方面，大多数编辑器都提供了一定程度的支持，如Cherry Markdown Editor使用DomPurify进行过滤，ByteMD和Mavon-Editor也提供了相应的安全配置。Vditor和Vue-Markdown-editor则提供了内置的安全过滤和高度可定制化的安全设置。Md-editor-v3利用JSX和TypeScript的优势，提供了安全特性。 + +除了Editor.md外，其他编辑器都提供了用户数据隔离支持。这表明大多数编辑器能够确保用户数据的隔离，防止潜在的数据泄露或污染。 + +Cherry Markdown Editor 内置了安全钩子，通过过滤白名单以及使用 DomPurify 进行扫描过滤，以防止 XSS 攻击等安全问题。这些安全措施的实施有助于保护用户数据免受XSS攻击和数据泄露的风险，同时也符合了数据丢失防护（DLP）的最佳实践，如Microsoft Security所定义的。通过这些措施，Markdown编辑器能够在保护数据安全的同时，提供高效的编辑体验。 + +## 7.拓展能力对比 + +### 7.1 插件系统 + +插件系统是扩展编辑器功能的重要方式，允许用户根据需要添加或修改编辑器的特定功能。以下是各编辑器在插件系统方面的表现： + +| 编辑器名称 | 插件数量 | 插件质量 | 备注 | +| ---------------------- | ---- | ---- | ------------------------------------------------------------------------- | +| Cherry Markdown Editor | 中 | 高 | 支持插件系统，提供钩子（hooks）和APIs，允许开发者注入自定义逻辑，支持多种样式主题选择。允许深度定制编辑器的外观和行为。 | +| ByteMD | 多样 | 高 | 通过插件系统，可以进行一定程度的外观和行为定制。支持语法高亮、数学公式、Mermaid流程图等插件。轻量级、框架无关，支持SSR，内置XSS处理。 | +| Mavon-Editor | 多样 | 中 | 主要针对Vue.js，外观定制灵活，但行为定制一般。支持自定义工具栏按钮，例如插入视频资源等。 | +| Editor.md | 多样 | 中 | 提供了一些基本的定制选项，但API丰富度一般。使用JSX和TypeScript开发，适合Vue3。 | +| Vditor | 多样 | 高 | 支持高度自定义，包括外观、行为以及扩展语言。支持自定义皮肤和主题，提供丰富的API接口和插件系统。 | +| Vue-Markdown-editor | 有限 | 中 | 作为Vue组件，外观定制灵活，但行为定制受限于Vue生态。支持Markdown和HTML编辑，提供自定义插件和工具栏选项。 | +| Md-editor-v3 | 中 | 中 | 支持高度自定义，包括主题切换、Prettier文本美化等。支持Vue3，使用TypeScript和JSX开发，支持国际化。 | +| tui.editor | 多样 | 高 | 提供了所见即所得编辑体验，外观和行为定制灵活。支持Markdown和HTML编辑，提供多种API，支持实时预览、语法高亮、自动生成目录索引等功能。 | + +### 7.2 自定义功能 + +自定义功能允许用户根据自己的需求调整编辑器的行为和外观。以下是各编辑器在自定义功能方面的表现： + +| 编辑器名称 | 外观定制 | API丰富度 | 备注 | +| ---------------------- | ---- | ------ | -------------------------------------------------------------------------------------------- | +| Cherry Markdown Editor | 高 | 高 | 支持插件系统，提供钩子（hooks）和APIs，允许开发者注入自定义逻辑，支持多种样式主题选择。允许深度定制编辑器的外观和行为。 | +| ByteMD | 中 | 高 | 通过插件系统，可以进行一定程度的外观和行为定制。支持语法高亮、数学公式、Mermaid流程图等插件。轻量级、框架无关，支持SSR，内置XSS处理。社区和个人开发者提供了丰富的自定义主题 | +| Mavon-Editor | 高 | 中 | 主要针对Vue.js，外观定制灵活，但行为定制一般。支持自定义工具栏按钮，例如插入视频资源等。 | +| Editor.md | 低 | 低 | 提供了一些基本的定制选项，但API丰富度一般。使用JSX和TypeScript开发，适合Vue3。 | +| Vditor | 高 | 高 | 支持高度自定义，包括外观、行为以及扩展语言。支持自定义皮肤和主题，提供丰富的API接口和插件系统。 | +| Vue-Markdown-editor | 高 | 中 | 作为Vue组件，外观定制灵活，但行为定制受限于Vue生态。支持Markdown和HTML编辑，提供自定义插件和工具栏选项。 | +| Md-editor-v3 | 高 | 高 | 支持高度自定义，包括主题切换、Prettier文本美化等。支持Vue3，使用TypeScript和JSX开发，支持国际化。 | +| tui.editor | 高 | 高 | 提供了所见即所得编辑体验，外观和行为定制灵活。支持Markdown和HTML编辑，提供多种API，支持实时预览、语法高亮、自动生成目录索引等功能。 | +![image.png](https://s2.loli.net/2024/10/11/DpnFdIfHVQewJ16.png) + + +在插件系统和自定义评分中，我们的参考指标主要为插件数量和质量、外观定制程度、API丰富度四大标准。这些编辑器在自定义功能方面各有千秋，Cherry Markdown Editor和ByteMD以其插件系统和API丰富度而脱颖而出，支持开发者通过编写自定义插件来扩展编辑器的功能。允许开发者在运行时注入自定义逻辑，满足特定需求。适合需要高度定制化的场景。虽然相较于有很长时间积淀的老牌markdown编辑器项目的还具有一定的成长空间，但是在新兴的markdown编辑器中已展现出良好的拓展能力。 + +## 8.引擎实现方式 + +技术栈的选择对于一个项目至关重要，其不仅是构建应用的基石，更是影响应用性能、可扩展性和可维护性的关键因素。对于Markdown编辑器而言，技术栈的选择尤为精细，因为它需要在提供丰富功能的同时，确保用户体验的流畅性和编辑器本身的高效性。 + +以下是我们对各Markdown编辑器技术栈的详细分析： + +| 编辑器名称 | 前端框架/库 | 渲染引擎 | 解析器 | 扩展机制 | 存储方式 | 备注 | +| ---------------------- | ------ | --------------- | --------------- | ---- | ----- | ----------------------------------- | +| Cherry Markdown Editor | 无 | 自定义 | 自定义 | API | 本地/远程 | 不依赖特定前端框架，使用纯JavaScript编写。 | +| ByteMD | Svelte | 自定义（基于Svelte） | 基于remark和rehype | 插件系统 | 本地 | 轻量级、框架无关，支持 SSR，内置XSS处理。 | +| Mavon-Editor | Vue.js | 自定义（基于Vue.js） | Markdown-it | 插件系统 | 本地 | 支持Vue2和Vue3，提供丰富的API和工具栏自定义。 | +| Editor.md | jQuery | CodeMirror | Marked | 插件系统 | 本地 | 使用JSX和TypeScript开发，适合Vue3。 | +| Vditor | 无 | 自定义（基于Electron） | 基于markdown-it | 插件系统 | 本地/远程 | 所见即所得编辑体验，高效且可扩展。 | +| Vue-Markdown-editor | Vue.js | 无 | 无 | 无 | 本地 | Vue组件，简单易用。 | +| Md-editor-v3 | Vue.js | CodeMirror | marked.js | 插件系统 | 本地 | 支持Vue3，使用TypeScript和JSX开发，支持国际化。 | +| tui.editor | 无 | 自定义 | 自定义 | API | 本地 | 基于jQuery，支持Markdown和HTML编辑，提供多种API。 | + +Cherry Markdown不依赖于任何特定的前端框架，采用纯JavaScript开发，同时采用了模块化的架构设计，允许代码被组织成独立的、可重用的单元，从而提高了代码的可维护性和可扩展性。 + +模块化架构还促进了功能隔离，使得各个模块可以独立开发和测试，允许开发者通过简单的API调用快速集成编辑器到各种应用场景中。 + +## 9.二开难易程度 + +由于文档和社区支持可以快速帮助开发者理解和使用API和插件系统，提供良好的学习交流平台，降低二开的阻碍，API易用程度和支持拓展语言则直接影响了二开的耗时和可行性。 + +因此，在讨论二开难易程度时，我们将文档和社区支持、API易用性和拓展语言支持作为衡量二开难易程度的指标。其中，社区支持程度由之前的活跃度分析数据得出。 + +| 编辑器名称 | 文档完整性 | 社区支持 | API易用性 | 扩展语言支持 | 备注 | +| ---------------------- | ----- | ---- | ------ | ------------------------ | ------------------------------------------------------------------- | +| Cherry Markdown Editor | 高 | 活跃 | 高 | 支持JavaScript | 提供了丰富的API文档和配置选项，支持多种编辑模式和插件系统，API设计直观，适用于需要高度定制化的场景 | +| ByteMD | 高 | 活跃 | 高 | 支持JavaScript, TypeScript | 提供了详细的安装和使用指南，以及丰富的示例和插件支持。API易用，支持高度定制化。 | +| Mavon-Editor | 中 | 活跃 | 中 | 支持JavaScript | 专为Vue.js框架设计的Markdown编辑器，提供了基本的文档和示例，但社区支持相对较少，对于Vue开发者来说学习难度较低。 | +| Editor.md | 高 | 中 | 中 | 支持JavaScript | 支持多种主题和插件，拥有活跃的社区和良好的官方支持，适用于多种应用场景。API一般，定制化难度适中。 | +| Vditor | 高 | 活跃 | 高 | 支持JavaScript, TypeScript | 提供了详细的文档和丰富的示例，社区支持良好。API设计优秀，定制化灵活，学习曲线低。 | +| Vue-Markdown-editor | 中 | 中 | 中 | 支持JavaScript | Vue组件简单易用，但文档和社区支持相对较少。作为Vue组件，对于Vue开发者来说使用简单。易于集成 | +| Md-editor-v3 | 中 | 低 | 中 | 中 | 社区讨论及支持不足，但文档攥写比较规范，清晰易懂 | +| tui.editor | 高 | 活跃 | 高 | 支持JavaScript | 基于jQuery，支持Markdown和HTML编辑，提供了详细的文档和API，社区支持良好。API设计优秀，定制化灵活，学习曲线低。 | + +![image.png](https://s2.loli.net/2024/10/11/Sg27GPtZNfUA4aq.png) + + +综上，cherry-markdonw的提供了较为丰富的文档和良好的社区支持，二开难度小，易于用户进行自定义开发。 + +## 10.总结 + +在对Cherry Markdown Editor及其主要竞品进行全面分析后，我们可以得出以下结论： + +Editor.md和tui.editor等成熟项目凭借多年的市场沉淀，维持了较高的活跃度和热度。而Cherry Markdown Editor在新兴项目中表现出色，日均stars数量超越了一些老牌项目，显示出其强大的市场竞争力和发展潜力。 + +在功能方面，CherryMarkdown支持丰富的额外语法特性，如图片尺寸调整、信息面板等，同时在自定义功能和插件系统方面表现出色，适合需要高度定制化的用户。移动端出现了工具栏右侧溢出问题，可以考虑进行优化。 + +而在性能上，各编辑器在加载时间、首次渲染时间和编辑操作响应时间上表现相近，CherryMarkdownEditor在局部渲染和更新方面表现良好。 + +安全方面，它提供了防XSS攻击和用户数据隔离的支持，通过内置安全钩子和DomPurify过滤，确保了编辑器的安全性。 + +拓展能力方面，CherryMarkdownEditor的插件系统和APl丰富度表现优秀，提供了丰富的自定义选项和扩展语言支持，适合开发者进行二次开发。在未来也可也借鉴学习其他优秀开源markdown编辑器的功能，提高产品竞争力。 + +CherryMarkdown采用纯JavaScript开发，模块化的架构设计提高了代码的可维护性和可扩展性。Cherry MarkdownEditor提供了丰富的文档和良好的社区支持，降低了二次开发的难度，易于用户进行自定义开发。 + +综上，Cherry Markdown Editor在多个维度上展现出了强大的竞争力，特别是在语法能力、功能丰富度、安全性能和拓展能力方面。虽然作为一个较新的项目，它在社区支持和成熟度方面还有提升空间，但其创新的特性和积极的社区参与表明，它有潜力成为市场上的领先Markdown编辑器之一。对于寻求高度定制化和现代化编辑体验的用户来说，Cherry Markdown Editor无疑是一个值得考虑的选择。 + +![image.png](https://s2.loli.net/2024/10/11/RYmjalLJbMAPf6S.png) + + + +以上为我的本次竞品分析项目内容，请各位导师批评指正。 diff --git a/docs/cherry markdown performance testing.md b/docs/cherry markdown performance testing.md new file mode 100644 index 000000000..262503f94 --- /dev/null +++ b/docs/cherry markdown performance testing.md @@ -0,0 +1,95 @@ +## 测试方法： + +通过对比在各种场景下的页面渲染速度来对比各种markdown插件的性能，我们将测试场景细分为以下三个关键维度：篇幅长短、内容复杂度、以及渲染类型。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
维度类别描述
篇幅长短1. 10kb以内适用于短小文档或文章的快速渲染。
2. 10kb～100kb适用于中等长度文档的渲染，平衡速度与功能。
3. 100kb以上适用于长篇文档，重点测试处理大量数据时的性能。
内容复杂度1. 纯文本仅包含基础文本内容，无额外Markdown语法元素。
2. 复杂文本包含多种Markdown语法元素，如标题、列表、代码块等。
渲染类型1.浏览重点测试文档浏览性能，适用于阅读场景。
2. 编辑重点测试文档编辑时的实时渲染性能。
+ +接下来我们根据**三个维度**设计了**12种不同情景**进行性能测试，**最终根据各种场景下的性能进行打分，并得出最终得分**。 + +## 测试过程截图(部分） + +![](https://s2.loli.net/2024/10/11/dGsEy4l9ZpoFAfh.png) +![aad27171186c6361d3aa3250f49b1ac.png](https://s2.loli.net/2024/10/11/KQEPkcpsgCji9DO.png) +![06ac019e8f40c5c37bc6b488748aeaa.png](https://s2.loli.net/2024/10/11/N6o3QFjpveswXfB.png) + +![06ac019e8f40c5c37bc6b488748aeaa.png](https://s2.loli.net/2024/10/11/qzlhIn9xUr5TRG1.png) +![0ebbac09b7a03a49feb65ff761f2085.png](https://s2.loli.net/2024/10/11/5OcRHW9AdLI1EiJ.png) +![c56e1850360d996846294d6c1bb9a46.png](https://s2.loli.net/2024/10/11/G5pdYxrQbfTlPDB.png) +![10d0b0b2cd61a029aaa8b85baad1315.png](https://s2.loli.net/2024/10/11/Z8Fg4rO7Pi6f5xv.png) +![](https://s2.loli.net/2024/10/11/Z8Fg4rO7Pi6f5xv.png) +![5eca229b78baf180c871d20e0bf59fe.png](https://s2.loli.net/2024/10/11/nRiN7ckELDsU8Pl.png) +![a93d605d6b1432bf4dcb5d1e58866d1.png](https://s2.loli.net/2024/10/11/F1kZH3Uzrd7gxfI.png) +![](https://s2.loli.net/2024/10/11/F1kZH3Uzrd7gxfI.png) + +![66bc320b8efb40db698513193121612.png](https://s2.loli.net/2024/10/11/mgOVHFt9AKlT3Ms.png) +![cc39dc5f104f0f7375dd9541abb3db5.png](https://s2.loli.net/2024/10/11/phOVUM8xy4PA7Xm.png) +![f4fe19ada922b47a39c75b30fbc87bb.png](https://s2.loli.net/2024/10/11/c2ld4aTgwpmztuI.png) + +![f4fe19ada922b47a39c75b30fbc87bb.png](https://s2.loli.net/2024/10/11/M34FQLiTbfa8rgq.png) +![16f75dc83e4d86cf52c5ef129896cc6.png](https://s2.loli.net/2024/10/11/DIfQwKTCd5uNUis.png) + +![f216f700e903a2ef7d149a530864971.png](https://s2.loli.net/2024/10/11/7FR3DyXPqfVC4A9.png) + +![f216f700e903a2ef7d149a530864971.png](https://s2.loli.net/2024/10/11/vyWXiKtE2hOQYNf.png) +![4c92b574d8659dcf5a3c14fe44a7ae0.png](https://s2.loli.net/2024/10/11/aC6c2NQAwkL95Il.png) +![703f866bea590587e88dc939301a3c2.png](https://s2.loli.net/2024/10/11/G2VIOxPZHtFqm69.png) +![3623e2a173d7753096c17cb29c22a9d.png](https://s2.loli.net/2024/10/11/bMR36FUksVtelgj.png) +![](https://s2.loli.net/2024/10/11/bMR36FUksVtelgj.png) +![b188c5d359502d84a9afdb9699007df.png](https://s2.loli.net/2024/10/11/fsdgWaGhMYoFDCb.png) + + +![154822676f1773c7e04bcd29f2d0464.png](https://s2.loli.net/2024/10/11/rUOlC1ozKqNcIiS.png) +![](https://s2.loli.net/2024/10/13/WirCBVeLclpNJfx.png) +![](https://s2.loli.net/2024/10/13/aZ8ub1G4oeTBRlF.png) +![](https://s2.loli.net/2024/10/13/corXBp8bHEiTISG.png) +![](https://s2.loli.net/2024/10/13/Iiv9cy4qSlXrj8C.png) +![](https://s2.loli.net/2024/10/13/Ezlrp5TGXOVv9us.png) +![](https://s2.loli.net/2024/10/13/GhNjgAZ3WU1Y9Vk.png) +![](https://s2.loli.net/2024/10/13/gNABXs76eodpZVx.png) +![](https://s2.loli.net/2024/10/13/ZyTeJVjFHG8p2wt.png) +![](https://s2.loli.net/2024/10/13/HgEld9aoBtj8pbA.png) +![](https://s2.loli.net/2024/10/13/qyRA1DQaFmLeN4E.png) +![](https://s2.loli.net/2024/10/13/sCEOSw3Z4rMVPKk.png) +![](https://s2.loli.net/2024/10/13/P9cK4B2JQykCbTs.png) +![](https://s2.loli.net/2024/10/13/d7wEGR6itSNylru.png) +![](https://s2.loli.net/2024/10/13/Q7H9cxfCG3uwsEe.png) +![](https://s2.loli.net/2024/10/13/v2KmC5OnHQly67Z.png) +![](https://s2.loli.net/2024/10/13/qH9ELofd6XSnR73.png) +![](https://s2.loli.net/2024/10/13/SzZFt4UlBKcDqwO.png) diff --git a/docs/markdown editor security risks.md b/docs/markdown editor security risks.md new file mode 100644 index 000000000..962feacc1 --- /dev/null +++ b/docs/markdown editor security risks.md @@ -0,0 +1,23 @@ +### 跨站脚本攻击（XSS） + +Markdown编辑器在渲染Markdown内容为HTML时，如果没有正确处理用户输入，可能会将恶意脚本作为正常内容渲染。攻击者通过在Markdown内容中注入恶意JavaScript代码，当其他用户查看转换后的HTML内容时，恶意脚本在用户浏览器中执行导致XSS攻击。 + +```markdown + +``` + +这段Markdown内容在被转换为HTML并渲染时，会尝试加载一个不存在的图片资源，并在加载失败时执行`onerror`事件处理器中的JavaScript代码，弹出一个包含恶意信息的警告框。 + +### 数据泄露 + +某些编辑器支持加载外部资源，如图片、样式表或完整的网页（即` +``` + +如果上述`