简介
最近在捯饬自己的个人网站，想找一款类似于的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\toastmark\src\html\baseConvertors.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级富文本修正器的典型代表。
修正器最终效果图如下：
完成源码
<template>
<div class="full">
<div class="markdown-editor" ref="editor"></div>
<div class="catalog-container" v-if="catalogList.length > 0">
<div class="catalog-title">目录</div>
<template v-for="(item, index) in catalogList" :key="index">
<div class="catalog-item" :class="item.cls">
<a :href="'#heading' + (index + 1)">{{item.content}}</a>
</div>
</template>
</div>
</div>
</template>
<script>
import Editor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'
import '@toast-ui/editor/dist/i18n/zh-cn';
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
import '@toast-ui/editor-plugin-table-merged-cell/dist/toastui-editor-plugin-table-merged-cell.css';
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
export default {
data () {
return {
catalogList: []
}
},
mounted () {
this.editor = new Editor({
el: this.$refs.editor,
language: 'zh-CN',
initialEditType: 'markdown',
previewStyle: 'vertical',
placeholder: '请输入内容',
plugins: [codeSyntaxHighlight, tableMergedCell],
events: {
change: this.handleContentChange.bind(this)
},
customHTMLRenderer: {
heading (node, { entering }) {
const spec = {
type: entering ? 'openTag' : 'closeTag',
tagName: `h${node.level}`,
outerNewLine: true,
};
// 增加自定义特点
if (entering) spec.attributes = {
'class': `heading${node.level}`
}
return spec
}
}
})
},
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
}
}
}
</script>
<style scoped>
.full {
position: relative
}
.catalog-container {
box-sizing: border-box;
position: absolute;
right: 0;
bottom: 32px;
width: 200px;
height: 300px;
padding: 16px 0;
background-color: rgba(255, 255, 255, .65);
border: 1px solid #ccc;
border-radius: 4px;
}
.catalog-title {
text-align: center;
padding-bottom: 12px;
}
.catalog-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 8px;
font-size: 14px;
user-select: none;
}
.catalog-item a {
color: rgba(0, 0, 0, .65);
text-decoration: none;
}
.heading-2 {
padding-left: 24px;
}
.heading-3 {
padding-left: 48px;
}
.catalog-item a:hover {
color: cadetblue;
}
.markdown-editor {
height: 100% !important;
background: #fff;
border-radius: 4px;
}
</style>
参考资料
- toastui/editor
- tui.editor
