优秀的编程知识分享平台

网站首页 > 技术文章 正文

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

nanyue 2024-12-17 15:33:43 技术文章 9 ℃

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!');

功能预览

同时 Cherry Markdown Editor 可以拓展使用,有自定义语法,可以自定义工具栏。

项目地址

https://github.com/Tencent/cherry-markdown

最近发表
标签列表