牛X！推荐一个腾讯开源的Markdown编辑器

程序员老鱼

发布于 2024-07-12 14:29:12

92200

代码可运行

文章被收录于专栏：前端实验室前端实验室

运行总次数：0

代码可运行

大家好，我是「前端实验室」爱分享的了不起~

相信大家开发、写文档过程中，一定都用到Markdown编辑器吧，今天给大家推荐腾讯开源的一款 Javascript Markdown 编辑器。

Cherry Markdown Editor

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

这款MD编辑器支持大部分常用的 markdown 语法（如标题、目录、流程图、公式等）。

同时可以快速进行二次开发或者功能扩展，喜欢捣鼓的小伙伴可以开发一些自己喜欢的小工具。

特性

安装

Cherry Markdown Editor 可以通过yarn / npm 方式来安装

yarn add cherry-markdown
or
npm install cherry-markdown --save

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

# 安装mermaid依赖开启mermaid画图功能
yarn add mermaid@9.4.3
# 安装echarts依赖开启表格自动转图表功能
yarn add echarts@4.6.0

快速上手

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>

UMD

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

ESM

const { default: CherryEngine } = require('cherry-markdown/dist/cherry-markdown.engine.core.common');
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');