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

冉成未来

已于 2025-04-22 11:39:20 修改

阅读量1.9k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js 流程图甘特图

于 2024-07-24 10:36:08 首次发布

本文链接：https://blog.csdn.net/weixin_45146962/article/details/140655734

文章目录

mavonEditor
mavonEditor 使用markdownIt
快捷键
报错记录
- 错误原因
- 解决办法

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>

toolbars
默认工具栏按钮全部开启, 传入自定义对象，可以选择启用部分按钮

/*
例如: {
bold: true, // 粗体
italic: true,// 斜体
header: true,// 标题
}
此时, 仅仅显示此三个功能键
/
toolbars: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
/ 1.3.5 /
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
/ 1.4.2 /
navigation: true, // 导航目录
/ 2.1.8 /
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/ 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
}
如果需要自定义添加工具栏按钮，可以通过以下方式

<mavon-editor>
  <!-- 左工具栏前加入自定义按钮 -->
  <template slot="left-toolbar-before">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 左工具栏后加入自定义按钮  -->
  <template slot="left-toolbar-after">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 右工具栏前加入自定义按钮  -->
  <template slot="right-toolbar-before">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 右工具栏后加入自定义按钮  -->
  <template slot="right-toolbar-after">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
</mavon-editor>

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)

快捷键

key keycode 功能
F8 119 开启/关闭导航
F9 120 预览/编辑切换
F10 121 开启/关闭全屏
F11 122 开启/关闭阅读模式
F12 123 单栏/双栏切换
TAB 9 缩进
CTRL + S 17 + 83 触发保存
CTRL + D 17 + 68 删除选中行
CTRL + Z 17 + 90 上一步
CTRL + Y 17 + 89 下一步
CTRL + BreakSpace 17 + 8 清空编辑
CTRL + B 17 + 66 加粗
CTRL + I 17 + 73 斜体
CTRL + H 17 + 72 # 标题
CTRL + 1 17 + 97 or 49 # 标题
CTRL + 2 17 + 98 or 50 ## 标题
CTRL + 3 17 + 99 or 51 ### 标题
CTRL + 4 17 + 100 or 52 #### 标题
CTRL + 5 17 + 101 or 53 ##### 标题
CTRL + 6 17 + 102 or 54 ###### 标题
CTRL + U 17 + 85 ++下划线++
CTRL + M 17 + 77 标记
CTRL + Q 17 + 81 > 引用
CTRL + O 17 + 79 1. 有序列表
CTRL + L 17 + 76 链接标题
CTRL + ALT + S 17 + 18 + 83 ^上角标
CTRL + ALT + U 17 + 18 + 85 - 无序列表
CTRL + ALT + C 17 + 18 + 67 ```代码块
CTRL + ALT + L 17 + 18 + 76 引入图片
CTRL + ALT + T 17 + 18 + 84 表格
CTRL + SHIFT + S 17 + 16 + 83 下角标
CTRL + SHIFT + D 17 + 16 + 68 ~~中划线~~
CTRL + SHIFT + C 17 + 16 + 67 居中
CTRL + SHIFT + L 17 + 16 + 76 居左
CTRL + SHIFT + R 17 + 16 + 82 居右
SHIFT + TAB 16 + 9 取消缩进