推举一款壮大的Markdown编纂器，腾讯开源的Cherr
奇闻趣事 2023-05-04 17:38www.bnfh.cn奇闻趣事
推荐一款强大的Markdon编辑器，腾讯开源的Cherry Markdon Editor
Cherry Markdon Editor 是一款 Javascript Markdon 编辑器，具有开箱即用、轻量简洁、易于扩展等特点. 它可以运行在浏览器或服务端(NodeJs).
平时我们用的Markdon编辑器或浏览器都是以桌面端为主， Cherry Markdon Editor则以B/S模式为主，也在规划一个桌面版客户端以代替typora等收费软件。Cherry Markdon功能非常强大，支持插入图片、视频、音频、流程图、时序图、状态图、UML图、 饼图、公式、注释、脚注等等，也支持eb纯浏览模式、移动端预览模式，还支持自定义语法。支持使用js嵌入到我们的网页任何地方，提供了多种样式主题和在线演示示例，由腾讯开源，推荐使用。
易于拓展
当 Cherry Markdon 编辑器支持的语法不满足开发者需求时，可以快速的进行二次开发或功能扩展。，CherryMarkdon 编辑器应该由纯 JavaScript 实现，不应该依赖 angular、vue、react 等框架技术，框架只提供容器环境即可。
语法特性
- 图片缩放、对齐、引用
- 根据表格内容生成图表
- 字体颜色、字体大小
- 字体背景颜色、上标、下标
- checklist
- 音视频
多种模式
- 双栏编辑预览模式（支持同步滚动）
- 纯预览模式
- 无工具栏模式（极简编辑模式）
- 移动端预览模式
功能特性
- 复制 Html 粘贴成 MD 语法
- 经典换行&常规换行
- 多光标编辑
- 图片尺寸
- 导出长图、pdf
- float toolbar 在新行行首支持快速工具栏
- bubble toolbar 选中文字时联想出快速工具栏
性能特性
- 局部渲染
- 局部更新
安全
Cherry Markdon 有内置的安全 Hook，通过过滤白名单以及 DomPurify 进行扫描过滤.
样式主题
Cherry Markdon 有多种样式主题选择
安装
通过 yarn
yarn add cherry-markdon通过 npm
npm install cherry-markdon --save如果需要开启 mermaid 画图、表格自动转图表功能，需要添加mermaid 与echarts包。
目前Cherry推荐的插件版本为echarts@4.6.0、mermaid@8.11.1
# 安装mermaid依赖开启mermaid画图功能
yarn add mermaid@8.11.1
# 安装echarts依赖开启表格自动转图表功能
yarn add echarts@4.6.0浏览器端使用方法
UMD
ESM
import Cherry from 'cherry-markdon';
const cherryInstance = ne Cherry({
id: 'markdon-container',
value: '# ele to cherry editor!',
});Node使用方法
const { default: CherryEngine } = require('cherry-markdon/dist/cherry-markdon.engine.core.mon');
const cherryEngineInstance = ne CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# ele to cherry editor!');使用轻量版本
因 mermaid 库尺寸非常大，Cherry 构建产物中包含了不内置 mermaid 的核心构建包，可按以下方式引入核心构建。
完整模式 (图形界面)
import Cherry from 'cherry-markdon/dist/cherry-markdon.core';
const cherryInstance = ne Cherry({
id: 'markdon-container',
value: '# ele to cherry editor!',
});