mavonEditor
安装mavonEditor
$ npm install mavon-editor --save
使用
// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
'el': '#main',
data() {
return { value: '' }
}
})
//局部使用
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
template中使用mavonEditor
<div>
<mavonEditor
ref="mavonEditorRef"
v-model="markdownContent"
:toolbars="toolbars"
:externalLink="true"
style="height: calc(100vh - 50px);z-index: 1;"
@save="createWikiSave(0)"
@imgAdd="addMarkdownImage"
placeholder="请录入文档内容"
class="page-content-editor wang-editor-body"/>
</div>
mavonEditor 使用markdownIt
搜索相关插件
https://www.npmjs.com/search?q=keywords:markdown-it-plugin%20mermaid
选择合适的插件
使用markdownIt 插件,实现流程图、时序图、甘特图
//安装
npm install mermaid-it-markdown mermaid --save
//引用
import mermaidItMarkdown from 'mermaid-it-markdown'
//使用
const markdownIt = mavonEditor.getMarkdownIt()
markdownIt.use(mermaidItMarkdown)
报错记录
@liradb2000_markdown-it-mermaid.js?v=5c807a2b:2552 Error:
attribute width: A negative value is not valid. ("-33")
错误原因
mavonEditor使用@liradb2000/markdown-it-mermaid插件出现错误,编辑区域使用空格或者回车的时候,都会提示错误。
解决办法
更换插件,使用mermaid-it-markdown插件,实现流程图、时序图、甘特图