Cherry Markdown Editor[1] 是一款 JavaScript Markdown 编辑器，它具有开箱即用、轻量级和易于扩展等优点。它既可以在浏览器中运行，也可以在服务器端（使用 Node.js）运行。

主要特性

开箱即用
开发者可以通过非常简单的方式调用和实例化 Cherry Markdown Editor。 默认情况下，实例化的 Cherry Markdown Editor 支持大多数常用的 Markdown 语法（例如标题、TOC、流程图、公式等）。

易于扩展
当 Cherry Markdown 编辑器支持的语法不能满足您的需求时，可以快速进行二次开发或功能扩展。 同时，Cherry Markdown 编辑器应该由纯 JavaScript 实现，不依赖于 Angular、Vue 和 React 等框架技术。 框架只提供容器环境。

语法特性
1. 图片缩放、对齐和引用
2. 根据表格内容生成图表
3. 调整字体颜色和大小
4. 字体背景颜色、上标和下标
5 插入清单
6 插入音频或视频

多种模式
1. 带有滚动同步的实时预览
2. 仅预览模式
3. 无工具栏模式（极简编辑模式）
4. 移动预览模式

功能特性
1. 从富文本复制并粘贴为 Markdown 文本
2. 经典换行和常规换行
3. 多光标编辑
4. 图片大小编辑
5. 导出为图片或 PDF
6. 浮动工具栏：出现在新行的开头
7. 气泡工具栏：在选择文本时出现

性能特性
1. 部分渲染
2. 部分更新

安全性
Cherry Markdown 具有内置的安全 Hook，通过过滤白名单和 DomPurify 来进行扫描过滤。

样式主题
Cherry Markdown 有多种样式主题可供选择。

安装

可以通过 yarn 或 npm 安装 Cherry Markdown：

Via yarn

yarn add cherry-markdown

Via npm

npm install cherry-markdown --save

如果需要启用 mermaid 绘图和表转图功能，需要同时添加 mermaid 和 echarts 包。

Install mermaid, enable mermaid and drawing function

yarn add [email protected]

Install echarts, turn on the table-to-chart function

yarn add [email protected]

快速上手

浏览器

UMD

<link href="cherry-editor.min.css" rel="stylesheet" />
<div id="markdown-container"></div>
<script src="cherry-editor.min.js"></script>
<script>
 new Cherry({
   id: 'markdown-container',
   value: '# welcome to cherry editor!',
 });
</script>

ESM

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';

const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

Node

const { default: CherryEngine } = require('cherry-markdown/dist/cherry-markdown.engine.core.common');

const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');

总结

Cherry Markdown Editor 是一款功能强大且易于使用的 Markdown 编辑器，无论您是前端开发者还是后端开发者，都可以轻松地将其集成到您的项目中。它丰富的功能和灵活的扩展性，可以满足您各种 Markdown 编辑需求。

引用链接

[1] Cherry Markdown Editor: https://github.com/Tencent/cherry-markdown