Cherry Markdown Editor 是一款 Javascript Markdown 编辑器，具有开箱即用、轻量简洁、易于扩展等特点. 它可以运行在浏览器或服务端(NodeJs).

平时我们用的Markdown编辑器或浏览器都是以桌面端为主， Cherry Markdown Editor则以B/S模式为主，同时也在规划一个桌面版客户端以代替typora等收费软件。Cherry Markdown功能非常强大，支持插入图片、视频、音频、流程图、时序图、状态图、UML图、饼图、公式、注释、脚注等等，同时也支持web纯浏览模式、移动端预览模式，还支持自定义语法。支持使用js嵌入到我们的网页任何地方，提供了多种样式主题和在线演示示例，由腾讯开源，推荐使用。

易于拓展

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

语法特性

图片缩放、对齐、引用
根据表格内容生成图表
字体颜色、字体大小
字体背景颜色、上标、下标
checklist
音视频

多种模式

双栏编辑预览模式（支持同步滚动）
纯预览模式
无工具栏模式（极简编辑模式）
移动端预览模式

功能特性

复制 Html 粘贴成 MD 语法
经典换行&常规换行
多光标编辑
图片尺寸
导出长图、pdf
float toolbar 在新行行首支持快速工具栏
bubble toolbar 选中文字时联想出快速工具栏

性能特性

局部渲染
局部更新

安全

Cherry Markdown 有内置的安全 Hook，通过过滤白名单以及 DomPurify 进行扫描过滤.

样式主题

Cherry Markdown 有多种样式主题选择

安装

通过 yarn

yarn add cherry-markdown

通过 npm

npm install cherry-markdown --save

如果需要开启 mermaid 画图、表格自动转图表功能，需要同时添加mermaid 与echarts包。

目前Cherry推荐的插件版本为[email protected]、[email protected]

# 安装mermaid依赖开启mermaid画图功能
yarn add [email protected]
# 安装echarts依赖开启表格自动转图表功能
yarn add [email protected]

浏览器端使用方法

UMD

<link href="cherry-editor.min.css" />
<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 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!');

使用轻量版本

因 mermaid 库尺寸非常大，Cherry 构建产物中包含了不内置 mermaid 的核心构建包，可按以下方式引入核心构建。

完整模式 (图形界面)

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

编辑模式

推荐一款强大的Markdown编辑器，腾讯开源的Cherry Markdown Editor

推荐一款强大的Markdown编辑器，腾讯开源的Cherry Markdown Editor