tui。editor一款功能强大的markdown编辑器
简介
最近在捯饬自己的个人网站,想找一款类似于掘金的markdown编辑器,主要诉求包含实时预览、语法高亮、自动生成目录索引。对比了市面上主流的几款编辑器,最后采用了@toast-ui/editor。选择的主要原因就是开箱即用,内置一些实用的插件,如表格并且支持合并单元格、语法高亮、图形展示、uml 绘制等;支持自定义插件扩展,因为这款编辑器是基于prosemirror ,前身即codemirror ,编辑器本身是偏底层的,提供了丰富的api 供我们自定义开发,这也大大增强了编辑器的灵活性,如果想加一个目录索引,我们完全可以自定义开发一个插件使用。
在初次使用过程中,也遇到一些注意点,本文以vue3 为例,简单介绍@toast-ui/editor 的使用过程。安装使用安装npm install @toast-ui/editor -S初始化import Editor from "@toast-ui/editor" import "@toast-ui/editor/dist/toastui-editor.css" import "@toast-ui/editor/dist/i18n/zh-cn"; export default { mounted () { const editor = new Editor({ el: this.$refs.editor, language: "zh-CN", initialEditType: "markdown", previewStyle: "vertical", }); } }
通过以上两步,我们就能得到一个简易的编辑器了,如下图所示:
简易模式
显然我们的目的不仅如此,markdown 编辑器还缺少语法高亮、目录栏,接下来我们看下如何扩展tui 官方插件
官方内置了以下插件:
插件名称
用途
@toast-ui/editor-plugin-chart
图形渲染
@toast-ui/editor-plugin-code-syntax-highlight
语法高亮
@toast-ui/editor-plugin-color-syntax
文本添加颜色
@toast-ui/editor-plugin-table-merged-cell
合并单元格
@toast-ui/editor-plugin-uml
渲染UML
接下来我们配置代码语法高亮。安装插件npm install @toast-ui/editor-plugin-code-syntax-highlight使用import "prismjs/themes/prism.css"; import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css"; import Editor from "@toast-ui/editor"; // 支持所有语言语法高亮 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js"; const editor = new Editor({ // ... plugins: [codeSyntaxHighlight] }); 功能拓展
目前编辑器包含了语法高亮,如果需要添加目录索引,可以监听文档编辑的change 事件,获取markdown 文档内容,通过正则表达式解析即可。具体实现如下:const editor = new Editor({ // ... events: { change: this.handleContentChange.bind(this) }, }); methods: { handleContentChange () { const mdText = this.editor.mdEditor.getMarkdown() this.parseMdTitle(mdText) }, parseMdTitle (mdText) { // 解析markdown title const pattern = /^(#+)s+(.+)/mg let result = mdText.match(pattern) if (!result) return const catalogList = result.map((vv, index) => { const levelText = vv.match(/^(#+)/) return { level: levelText[0].length, // 目录级别 index, cls: `heading-${levelText[0].length}`, content: vv.slice(levelText[0].length).trim(), // 内容 } }) this.catalogList = catalogList } }
以上仅仅是一些基础的使用。markdown 基础语法无法满足我们需要时、需要手动修改渲染样式等需求,tui.editor 也提供相应的能力。如需要修改标题的默认渲染样式,我们可以使用customHTMLRenderer ,这一块官方文档较少,可以从源码看出默认书写规则,内置schema 位置详见源码libs oastmarksrchtmlbaseConvertors.ts 。new Editor({ // ... customHTMLRenderer: { heading (node, { entering }) { const spec = { type: entering ? "openTag" : "closeTag", tagName: `h${node.level}`, outerNewLine: true, }; // 给每个header添加class if (entering) spec.attributes = { "class": `heading${node.level}` } return spec } } })
最新3.0 版本的编辑器是基于Prosemirror ,有兴趣的小伙伴可以去看下,功能十分强大,也是level1 级富文本编辑器的典型代表。
编辑器最终效果图如下:
最终效果实现源码 0"> 目录 {{item.content}}