vue使用mavonEditor(流程图、时序图、甘特图实现)

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

搜索相关插件

markdownIt插件搜索

https://www.npmjs.com/search?q=keywords:markdown-it-plugin%20mermaid 

选择合适的插件

使用markdownIt 插件，实现流程图、时序图、甘特图

mermaid-it-markdown npm地址

mermaid-it-markdown语法地址

//安装 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插件，实现流程图、时序图、甘特图