Modules 1 to 4 are preliminarily completed.

docs/Competitor-Analysis.md

@@ -1,3 +1,5 @@
+# Cherry-Markdown-competitor-analysis
+
 
 ### 内容介绍
 
@@ -9,40 +11,41 @@
 
 #### 目录
 
-1. [项目简述](#1.%E9%A1%B9%E7%9B%AE%E7%AE%80%E8%BF%B0)
-	1. [1.1 项目介绍](#1.1%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D)
-	1. [1.2 项目特性](#1.1%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D)
-1. [2.主要竞品概述](#2.%E4%B8%BB%E8%A6%81%E7%AB%9E%E5%93%81%E6%A6%82%E8%BF%B0)
-	1. [2.1 目前主要的markdown编辑器](#2.1%20%E7%9B%AE%E5%89%8D%E4%B8%BB%E8%A6%81%E7%9A%84markdown%E7%BC%96%E8%BE%91%E5%99%A8)
-	2. [2.2 定位和目标用户](#2.2%20%E5%AE%9A%E4%BD%8D%E5%92%8C%E7%9B%AE%E6%A0%87%E7%94%A8%E6%88%B7)
-2. [3.语法能力对比](#3.%E8%AF%AD%E6%B3%95%E8%83%BD%E5%8A%9B%E5%AF%B9%E6%AF%94)
-	1. [3.1 语法支持](#3.1%20%E8%AF%AD%E6%B3%95%E6%94%AF%E6%8C%81)
-	2. [3.2 语法特性](#3.2%20%E8%AF%AD%E6%B3%95%E7%89%B9%E6%80%A7)
-	3. [3.3 兼容性](#3.3%20%E5%85%BC%E5%AE%B9%E6%80%A7)
-3. [4.功能对比](#4.%E5%8A%9F%E8%83%BD%E5%AF%B9%E6%AF%94)
-	1. [4.1 语法支持](#4.1%20%E8%AF%AD%E6%B3%95%E6%94%AF%E6%8C%81)
-	2. [4.2 编辑模式](#4.2%20%E7%BC%96%E8%BE%91%E6%A8%A1%E5%BC%8F)
-	3. [4.3 功能特性](#4.3%20%E5%8A%9F%E8%83%BD%E7%89%B9%E6%80%A7)
-4. [5.性能对比](#5.%E6%80%A7%E8%83%BD%E5%AF%B9%E6%AF%94)
-	1. [5.1 测试环境描述](#5.1%20%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83%E6%8F%8F%E8%BF%B0)
-	2. [5.2 局部渲染和更新](#5.2%20%E5%B1%80%E9%83%A8%E6%B8%B2%E6%9F%93%E5%92%8C%E6%9B%B4%E6%96%B0)
-	3. [5.3 运行环境](#5.3%20%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83)
-	4. [5.4 性能指标](#5.4%20%E6%80%A7%E8%83%BD%E6%8C%87%E6%A0%87)
-	5. [5.5 测试结果](#5.5%20%E6%B5%8B%E8%AF%95%E7%BB%93%E6%9E%9C)
-5. [6.安全对比](#6.%E5%AE%89%E5%85%A8%E5%AF%B9%E6%AF%94)
-	1. [6.1 数据保护](#6.1%20%E6%95%B0%E6%8D%AE%E4%BF%9D%E6%8A%A4)
-	2. [6.2 漏洞管理](#6.2%20%E6%BC%8F%E6%B4%9E%E7%AE%A1%E7%90%86)
-6. [7.拓展能力对比](#7.%E6%8B%93%E5%B1%95%E8%83%BD%E5%8A%9B%E5%AF%B9%E6%AF%94)
-	1. [7.1 插件系统](#7.1%20%E6%8F%92%E4%BB%B6%E7%B3%BB%E7%BB%9F)
-	2. [7.2 自定义功能](#7.2%20%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD)
-7. [8.引擎实现方式](#8.%E5%BC%95%E6%93%8E%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F)
-	1. [8.1 技术栈](#8.1%20%E6%8A%80%E6%9C%AF%E6%A0%88)
-	2. [8.2 设计模式](#8.2%20%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F)
-	3. [8.3 代码质量](#8.3%20%E4%BB%A3%E7%A0%81%E8%B4%A8%E9%87%8F)
-8. [9.二开难易程度](#9.%E4%BA%8C%E5%BC%80%E9%9A%BE%E6%98%93%E7%A8%8B%E5%BA%A6)
-	1. [9.1 文档与支持](#9.1%20%E6%96%87%E6%A1%A3%E4%B8%8E%E6%94%AF%E6%8C%81)
-	2. [9.2 开发复杂度](#9.2%20%E5%BC%80%E5%8F%91%E5%A4%8D%E6%9D%82%E5%BA%A6)
-	3. [9.3 API和插件](#9.3%20API%E5%92%8C%E6%8F%92%E4%BB%B6)
+1.项目简述 
+	1.1 项目介绍 
+	1.2 项目特性
+2.主要竞品概述 
+	2.1 目前主要的markdown编辑器 
+	2.2 定位和目标用户
+
+3.语法能力对比 
+	3.1 语法支持 
+	3.2 语法特性 
+	3.3 兼容性
+4.功能对比 
+	4.1 语法支持 
+	4.2 编辑模式 
+	4.3 功能特性
+5.性能对比 
+	5.1 测试环境描述 
+	5.2 局部渲染和更新 
+	5.3 运行环境 
+	5.4 性能指标 
+	5.5 测试结果
+6.安全对比 
+	6.1 数据保护 
+	6.2 漏洞管理
+7.拓展能力对比 
+	7.1 插件系统 
+	7.2 自定义功能
+8.引擎实现方式 
+	8.1 技术栈 
+	8.2 设计模式 
+	8.3 代码质量
+9.二开难易程度 
+	9.1 文档与支持 
+	9.2 开发复杂度 
+	9.3 API和插件
 
 ### 1.Cherry Markdown项目简述
 ---
@@ -57,7 +60,7 @@ Cherry Markdown Editor 是一款 **Javascript Markdown 编辑器**，具有**开
 当 Cherry Markdown 编辑器支持的语法不满足开发者需求时，可以快速的进行**二次开发或功能扩展**。同时，CherryMarkdown 编辑器应该由**纯 JavaScript 实现，不应该依赖 angular、vue、react 等框架技术，框架只提供容器环境即可。
 
 ![f689eeec218dc529228e3b6e09bd5770.png](https://ice.frostsky.com/2024/09/05/f689eeec218dc529228e3b6e09bd5770.png)
-<center>图1.本地部署cherry Markdown Editor演示</center>
+
 #### 1.2 项目特性
 
 - 语法特性
@@ -133,142 +136,84 @@ Cherry Markdown Editor 可以运行在**浏览器或服务端(NodeJs).** 相较
 ---
 
 #### 3.1 语法支持
-//TODO:图表对比
 
 在现代的Markdown编辑器中，除了支持基础的Markdown语法（如标题、无序列表、有序列表、链接、强调、代码块等），用户还期待更多的高级语法特性。以下是一些主要Markdown编辑器在语法支持方面的对比：
 
-1. **ByteMD**：支持基础Markdown语法，以及扩展插件系统，可以添加数学公式和流程图等高级功能。
-2. **Mavon-Editor**：支持基础Markdown语法，并且对代码块和备注的支持较好，适合需要展示代码或技术文档的场景。
-3. **Editor.md**：支持基础Markdown语法，并提供实时预览、图像上载、代码折叠、搜索替换等高级功能。
-4. **Vditor**：支持基础Markdown语法，以及所见即所得和即时渲染模式，适合需要类似Typora编辑体验的用户。
-5. **Vue-markdown-editor**：作为一个Vue组件，它支持基础Markdown语法，并且可以轻松集成到Vue项目中。
-6. **Md-editor-v3**：支持基础Markdown语法，并且使用JSX和TypeScript开发，适合需要在Vue3项目中使用Markdown编辑器的场景。
-7. **tui.editor**：支持基础Markdown语法，并且提供所见即所得的编辑体验，适合需要高效且可扩展编辑器的用户。
+| 编辑器名称       | 支持的Markdown语法 | 额外特性 |
+|----------------|------------------|----------|
+| ByteMD         | 基础语法          | 扩展插件系统，支持数学公式和流程图 |
+| Mavon-Editor   | 基础语法          | 代码块和备注支持较好，适合展示代码或技术文档 |
+| Editor.md      | 基础语法          | 实时预览、图像上载、代码折叠、搜索替换 |
+| Vditor         | 基础语法          | 所见即所得和即时渲染模式，类似Typora体验 |
+| Vue-markdown-editor | 基础语法 | 易于集成到Vue项目中 |
+| Md-editor-v3   | 基础语法          | 使用JSX和TypeScript开发，适合Vue3 |
+| tui.editor     | 基础语法          | 所见即所得编辑体验，高效且可扩展 |
 
 #### 3.2 语法特性
-//TODO:图表对比
-
-Cherry Markdown Editor 的语法特性如下：
-
-- 图片缩放、对齐、引用
-- 根据表格内容生成图表
-- 字体颜色、字体大小
-- 字体背景颜色、上标、下标
-- Checklist
-- 音视频
-
-与之相比，其他编辑器的语法特性可能包括但不限于：
 
-- **ByteMD**：可能支持数学公式和流程图的扩展。
-- **Mavon-Editor**：可能支持更丰富的代码块和备注功能。
-- **Editor.md**：可能支持图像上载和代码折叠。
-- **Vditor**：可能支持更多的所见即所得编辑功能。
-- **Vue-markdown-editor**：可能支持Vue特定的Markdown编辑功能。
-- **Md-editor-v3**：可能支持主题切换和文本美化。
-- **tui.editor**：可能支持更多的所见即所得编辑功能和扩展。
+| 特性                 | ByteMD | Mavon-Editor | Editor.md | Vditor | Vue-markdown-editor | Md-editor-v3 | tui.editor |
+|---------------------|--------|--------------|-----------|--------|-------------------|-------------|-----------|
+| 图片缩放、对齐、引用   | 支持   | 支持         | 支持      | 支持   | 支持               | 支持        | 支持       |
+| 根据表格内容生成图表 | 支持   | 支持         | 支持      | 支持   | 支持               | 支持        | 支持       |
+| 字体颜色、字体大小    | 支持   | 支持         | 支持      | 支持   | 支持               | 支持        | 支持       |
+| 字体背景颜色、上标、下标 | 支持   | 支持         | 支持      | 支持   | 支持               | 支持        | 支持       |
+| Checklist            | 支持   | 支持         | 支持      | 支持   | 支持               | 支持        | 支持       |
+| 音视频               | 支持   | 支持         | 支持      | 支持   | 支持               | 支持        | 支持       |
+| 数学公式和流程图     | 支持   |              |           |        |                   |             |           |
+| 代码块和备注         |        | 支持         |           |        |                   |             |           |
+| 图像上载和代码折叠   |        |              | 支持      |        |                   |             |           |
+| 所见即所得编辑功能   |        |              |           | 支持   |                   |             | 支持       |
+| Vue特定编辑功能     |        |              |           |        | 支持               |             |           |
+| 主题切换和文本美化   |        |              |           |        |                   | 支持        |           |
 
 #### 3.3 兼容性
-//TODO:图表对比
-1. **Cherry Markdown Editor**
-    - **浏览器兼容性**：支持所有主流浏览器，包括但不限于Chrome、Firefox、Safari、Edge等。
-    - **操作系统兼容性**：能够在Windows、macOS、Linux等操作系统上运行，无需额外配置。
-    - **框架兼容性**：不依赖于特定的前端框架，可以轻松集成到任何使用JavaScript的前端项目中。
-    - **移动端兼容性**：提供移动端预览模式，确保在智能手机和平板电脑上也能提供良好的用户体验。
-2. **ByteMD**
-    - **浏览器兼容性**：兼容主流浏览器，支持现代Web标准。
-    - **框架兼容性**：专为现代JavaScript框架设计，如React、Vue和Angular，易于集成。
-    - **SSR兼容性**：支持服务器端渲染，适合需要SSR支持的应用。
-3. **Mavon-Editor**
-    - **浏览器兼容性**：在主流浏览器中表现良好，包括对Vue.js的支持。
-    - **框架兼容性**：专为Vue.js框架设计，对于Vue开发者来说集成简单。
-4. **Editor.md**
-    - **浏览器兼容性**：支持所有主流浏览器，包括对老旧浏览器的良好支持。
-    - **框架兼容性**：作为一个独立的组件，可以轻松集成到任何前端项目中。
-5. **Vditor**
-    - **浏览器兼容性**：在现代浏览器中提供一致的用户体验。
-    - **模式兼容性**：支持多种编辑模式，包括所见即所得和即时渲染模式。
-6. **Vue-markdown-editor**
-    - **浏览器兼容性**：主要针对使用Vue.js的开发者，兼容主流浏览器。
-    - **框架兼容性**：专为Vue.js设计，易于在Vue项目中使用。
-7. **Md-editor-v3**
-    - **浏览器兼容性**：兼容主流浏览器，支持Vue3的特性。
-    - **框架兼容性**：专为Vue3开发，使用JSX和TypeScript，适合现代Web开发。
-8. **tui.editor**
-    - **浏览器兼容性**：在所有主流浏览器中提供一致的编辑体验。
-    - **框架兼容性**：作为一个独立的编辑器，可以集成到任何支持JavaScript的前端框架中。
+
+| 特性               | Cherry Markdown Editor | ByteMD | Mavon-Editor | Editor.md | Vditor | Vue-markdown-editor | Md-editor-v3 | tui.editor |
+|-------------------|------------------------|---------|--------------|-----------|--------|--------------------|-------------|-----------|
+| 浏览器兼容性       | 支持所有主流浏览器     | 兼容主流浏览器 | 支持Vue.js | 支持所有主流浏览器 | 兼容现代浏览器 | 兼容主流浏览器 | 兼容主流浏览器 | 兼容所有主流浏览器 |
+| 操作系统兼容性     | 支持Windows、macOS、Linux | 未明确 | 未明确 | 未明确 | 未明确 | 未明确 | 未明确 | 未明确 |
+| 框架兼容性         | 不依赖特定框架         | 专为现代JavaScript框架设计 | 专为Vue.js设计 | 作为一个独立的组件 | 未明确 | 专为Vue.js设计 | 专为Vue3开发 | 作为一个独立的编辑器 |
+| 移动端兼容性       | 提供移动端预览模式     | 未明确 | 未明确 | 未明确 | 未明确 | 未明确 | 未明确 | 未明确 |
+| 服务器端渲染(SSR)兼容性 | 未明确 | 支持SSR | 未明确 | 未明确 | 未明确 | 未明确 | 未明确 | 未明确 |
+| 编辑模式兼容性     | 未明确 | 未明确 | 未明确 | 未明确 | 支持多种编辑模式 | 未明确 | 未明确 | 未明确 |
 
 
 ### 4.功能对比
 ---
 #### 4.1 语法支持
-//TODO:图表对比
-
-- **Cherry Markdown Editor**
-    - 支持标题、目录、流程图、公式等高级Markdown语法。
-    - 图片缩放、对齐、引用，提供更丰富的图片编辑选项。
-    - 字体样式支持，包括颜色、大小、背景颜色、上标、下标等。
-    - 支持checklist，方便创建和跟踪任务列表。
-    - 支持音视频嵌入，丰富内容表现形式。
-
-- **ByteMD**
-    - 支持基础Markdown语法和扩展插件系统。
-    - 代码语法高亮显示，适合技术文档和代码示例。
-    - 数学公式和流程图支持，适合学术和技术写作。
-
-- **Mavon-Editor**
-    - 所见即所得的编辑体验，支持多种Markdown标签。
-    - 代码块和备注支持较好，适合展示代码和详细说明。
-
-- **Editor.md**
-    - 实时预览、图像上载、预格式化文本/代码块/表格插入。
-    - 代码折叠、搜索替换、只读模式、多语言支持。
-
-- **Vditor**
-    - 所见即所得（富文本）、即时渲染和分屏预览模式。
-    - 支持多种编辑模式，适应不同用户习惯。
-
-- **Vue-markdown-editor**
-    - 作为Vue组件，支持基础Markdown语法。
-    - 可以定制化以适应Vue项目的特殊需求。
-
-- **Md-editor-v3**
-    - 支持Vue3的特性，使用JSX和TypeScript开发。
-    - 支持主题切换、Prettier美化文本等高级功能。
-
-- **tui.editor**
-    - 所见即所得编辑器，高效且可扩展。
-    - 支持多种语言和代码语法高亮。
+| 特性             | Cherry Markdown Editor | ByteMD | Mavon-Editor | Editor.md | Vditor | Vue-markdown-editor | Md-editor-v3 | tui.editor |
+| -------------- | ---------------------- | ------ | ------------ | --------- | ------ | ------------------- | ------------ | ---------- |
+| 支持高级Markdown语法 | ✅                      | ✅      | ✅            | ✅         | ✅      | ✅                   | ✅            | ✅          |
+| 图片编辑选项         | ✅                      |        |              |           |        |                     |              |            |
+| 字体样式支持         | ✅                      |        |              |           |        |                     |              |            |
+| 支持checklist    | ✅                      |        |              |           |        |                     |              |            |
+| 音视频嵌入支持        | ✅                      |        |              |           |        |                     |              |            |
+| 扩展插件系统         |                        | ✅      |              |           |        |                     |              |            |
+| 代码语法高亮         |                        | ✅      | ✅            | ✅         |        |                     |              | ✅          |
+| 数学公式和流程图       |                        | ✅      |              | ✅         |        |                     |              |            |
+| 实时预览           |                        |        |              | ✅         | ✅      |                     |              | ✅          |
+| 图像上载           |                        |        |              | ✅         |        |                     |              |            |
+| 代码折叠           |                        |        |              | ✅         |        |                     |              |            |
+| 多语言支持          |                        |        |              | ✅         |        |                     |              |            |
+| 所见即所得编辑        |                        |        | ✅            |           | ✅      |                     |              | ✅          |
+| 即时渲染模式         |                        |        |              |           | ✅      |                     |              |            |
+| 分屏预览模式         |                        |        |              |           | ✅      |                     |              |            |
+| 定制化            |                        |        |              |           |        | ✅                   |              |            |
+| 主题切换           |                        |        |              |           |        |                     | ✅            |            |
+| Prettier美化文本   |                        |        |              |           |        |                     | ✅            |            |
 
 
 #### 4.2 编辑模式
-//TODO:图表对比
-
-- **Cherry Markdown Editor**
-    - 双栏编辑预览模式，支持同步滚动。
-    - 纯预览模式，专注于内容展示。
-    - 无工具栏模式，极简编辑体验。
-    - 移动端预览模式，优化移动设备上的阅读体验。
-
-- **ByteMD**
-    - 可定制的编辑器模式，适应不同的集成需求。
-
-- **Mavon-Editor**
-    - 所见即所得模式，提供直观的编辑体验。
-
-- **Editor.md**
-    - 实时预览模式，编辑和预览同步进行。
-
-- **Vditor**
-    - 多种编辑模式，包括所见即所得和即时渲染。
-
-- **Vue-markdown-editor**
-    - 作为Vue组件，可以灵活地集成到Vue应用中。
-
-- **Md-editor-v3**
-    - 支持主题切换，提供个性化的编辑体验。
-
-- **tui.editor**
-    - 所见即所得模式，提供流畅的编辑体验。
+| 编辑器名称             | 双栏编辑预览模式 | 纯预览模式 | 无工具栏模式 | 移动端预览模式 | 定制编辑器模式 | 所见即所得模式 | 实时预览模式 | 多种编辑模式 | 作为Vue组件 | 支持主题切换 | 所见即所得模式 |
+|----------------------|----------------|----------|------------|--------------|--------------|--------------|-------------|-------------|----------|-------------|--------------|
+| Cherry Markdown Editor | ✅             | ✅        | ✅          | ✅            |               |              |             |             |           | ✅          |              |              |
+| ByteMD                |                |          |            |              | ✅            |              |             |             |           |             |              |              |
+| Mavon-Editor          |                |          |            |              |               | ✅           |             |             |           |             |              |              |
+| Editor.md             |                |          |            |              |               |              | ✅          |             |           |             |              |              |
+| Vditor                |                |          |            |              |               |              |             | ✅          |           |             |              |              |
+| Vue-markdown-editor   |                |          |            |              |               |              |             |             | ✅        |             |              |              |
+| Md-editor-v3          |                |          |            |              |               |              |             |             |           |             | ✅          |              |
+| tui.editor            |                |          |            |              |               |              |             |             |           |             |              | ✅            |
 
 #### 4.3 功能特性
 //TODO:图表对比