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

相关推荐
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷3 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
苹果酱05675 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.5 小时前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding5 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥5 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信5 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩6 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
凉豆菌7 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司7 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui