Vue中使用mavonEditor插件实现markdown在线编辑

怼烎@ 2023-09-30 13:16 21阅读 0赞

## 场景 ##

若依前后端分离版手把手教你本地搭建环境并运行项目：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_霸道流氓气质的博客-CSDN博客\_若依前后端分离][-CSDN]

在上面的基础上，怎样实现markdown在线编辑功能。

![3f3022b00a3b1dafb2fffd97b1e242a0.gif][]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、插件地址

[mavon-editor - npm][]

2、安装插件

npm install mavon-editor --save

![ac5381dd52fa7c8eda0815d604428bd8.png][]

3、全局引入组件

按照官方文档指示在index.js中

![c73087460e73ff3310456eeb5de9aa32.png][]

在这里打开main.js

//引入mavonEditor
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)

![b1dd07eaf8d696567ee8fd4d727a7ee6.png][]

4、新建vue页面并修改代码如下

<template>
        <mavon-editor v-model="value"/>
    </template>
    
    <script>
    
    export default {
        name: "mavonEditorDemo",
      data () {
        return {
            value: '公众号:霸道的程序猿'
        }
      },
    }
    </script>

5、API文档

####  ####

<table> 
 <thead> 
  <tr> 
   <th>name 名称</th> 
   <th>type 类型</th> 
   <th>default 默认值</th> 
   <th>describe 描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>String</td> 
   <td></td> 
   <td>初始值</td> 
  </tr> 
  <tr> 
   <td>language</td> 
   <td>String</td> 
   <td>zh-CN</td> 
   <td>语言选择，暂支持 zh-CN: 简体中文, zh-TW: 正体中文 ， en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语</td> 
  </tr> 
  <tr> 
   <td>fontSize</td> 
   <td>String</td> 
   <td>14px</td> 
   <td>编辑区域文字大小</td> 
  </tr> 
  <tr> 
   <td>scrollStyle</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>开启滚动条样式(暂时仅支持chrome)</td> 
  </tr> 
  <tr> 
   <td>boxShadow</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>开启边框阴影</td> 
  </tr> 
  <tr> 
   <td>boxShadowStyle</td> 
   <td>String</td> 
   <td>0 2px 12px 0 rgba(0, 0, 0, 0.1)</td> 
   <td>边框阴影样式</td> 
  </tr> 
  <tr> 
   <td>transition</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>是否开启过渡动画</td> 
  </tr> 
  <tr> 
   <td>toolbarsBackground</td> 
   <td>String</td> 
   <td>#ffffff</td> 
   <td>工具栏背景颜色</td> 
  </tr> 
  <tr> 
   <td>previewBackground</td> 
   <td>String</td> 
   <td>#fbfbfb</td> 
   <td>预览框背景颜色</td> 
  </tr> 
  <tr> 
   <td>subfield</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)</td> 
  </tr> 
  <tr> 
   <td>defaultOpen</td> 
   <td>String</td> 
   <td></td> 
   <td>在单栏（<code>subfield=false</code>）时默认展示区域.<br> edit： 默认展示编辑区域，<br> preview： 默认展示预览区域<br> 其他 = edit</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>String</td> 
   <td>开始编辑...</td> 
   <td>输入框为空时默认提示文本</td> 
  </tr> 
  <tr> 
   <td>editable</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>是否允许编辑</td> 
  </tr> 
  <tr> 
   <td>codeStyle</td> 
   <td>String</td> 
   <td>code-github</td> 
   <td>markdown样式： 默认github,&nbsp;<a href="https://github.com/hinesboy/mavonEditor/blob/HEAD/src/lib/core/hljs/lang.hljs.css.js" title="可选配色方案" rel="nofollow">可选配色方案</a></td> 
  </tr> 
  <tr> 
   <td>toolbarsFlag</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>工具栏是否显示</td> 
  </tr> 
  <tr> 
   <td>navigation</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>默认展示目录</td> 
  </tr> 
  <tr> 
   <td>shortCut</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>是否启用快捷键</td> 
  </tr> 
  <tr> 
   <td>autofocus</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>自动聚焦到文本框</td> 
  </tr> 
  <tr> 
   <td>ishljs</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>代码高亮</td> 
  </tr> 
  <tr> 
   <td>imageFilter</td> 
   <td>function</td> 
   <td>null</td> 
   <td>图片过滤函数，参数为一个<code>File Object</code>，要求返回一个<code>Boolean</code>,&nbsp;<code>true</code>表示文件合法，<code>false</code>表示文件不合法</td> 
  </tr> 
  <tr> 
   <td>imageClick</td> 
   <td>function</td> 
   <td>null</td> 
   <td>图片点击事件，默认为预览，可覆盖</td> 
  </tr> 
  <tr> 
   <td>tabSize</td> 
   <td>Number</td> 
   <td>\t</td> 
   <td>tab转化为几个空格，默认为\t</td> 
  </tr> 
  <tr> 
   <td>html</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>启用HTML标签，因为历史原因这个标记一直默认为true，但建议不使用HTML标签就关闭它，它能彻底杜绝安全问题。</td> 
  </tr> 
  <tr> 
   <td>xssOptions</td> 
   <td>Object</td> 
   <td>{}</td> 
   <td>xss规则配置, 默认开启，设置false可以关闭，开启后会对HTML标签进行过滤，默认过滤所有HTML标签属性，建议按需配置白名单减少被攻击的可能。<br> - 自定义规则参考:&nbsp;<a href="https://jsxss.com/zh/options.html" title="自定义过滤规则 - 根据白名单过滤HTML(防止XSS攻击)" rel="nofollow">自定义过滤规则 - 根据白名单过滤HTML(防止XSS攻击)</a><br> - 参考DEMO:&nbsp;<a href="https://github.com/hinesboy/mavonEditor/blob/HEAD/src/dev/editor.vue" title="dev-demo" rel="nofollow">dev-demo</a></td> 
  </tr> 
  <tr> 
   <td>toolbars</td> 
   <td>Object</td> 
   <td>如下例</td> 
   <td>工具栏</td> 
  </tr> 
 </tbody> 
</table>

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>

#### events 事件绑定 ####

<table> 
 <thead> 
  <tr> 
   <th>name 方法名</th> 
   <th>params 参数</th> 
   <th>describe 描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>String: value , String: render</td> 
   <td>编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)</td> 
  </tr> 
  <tr> 
   <td>save</td> 
   <td>String: value , String: render</td> 
   <td>ctrl + s 的回调事件(保存按键,同样触发该回调)</td> 
  </tr> 
  <tr> 
   <td>fullScreen</td> 
   <td>Boolean: status , String: value</td> 
   <td>切换全屏编辑的回调事件(boolean: 全屏开启状态)</td> 
  </tr> 
  <tr> 
   <td>readModel</td> 
   <td>Boolean: status , String: value</td> 
   <td>切换沉浸式阅读的回调事件(boolean: 阅读开启状态)</td> 
  </tr> 
  <tr> 
   <td>htmlCode</td> 
   <td>Boolean: status , String: value</td> 
   <td>查看html源码的回调事件(boolean: 源码开启状态)</td> 
  </tr> 
  <tr> 
   <td>subfieldToggle</td> 
   <td>Boolean: status , String: value</td> 
   <td>切换单双栏编辑的回调事件(boolean: 双栏开启状态)</td> 
  </tr> 
  <tr> 
   <td>previewToggle</td> 
   <td>Boolean: status , String: value</td> 
   <td>切换预览编辑的回调事件(boolean: 预览开启状态)</td> 
  </tr> 
  <tr> 
   <td>helpToggle</td> 
   <td>Boolean: status , String: value</td> 
   <td>查看帮助的回调事件(boolean: 帮助开启状态)</td> 
  </tr> 
  <tr> 
   <td>navigationToggle</td> 
   <td>Boolean: status , String: value</td> 
   <td>切换导航目录的回调事件(boolean: 导航开启状态)</td> 
  </tr> 
  <tr> 
   <td>imgAdd</td> 
   <td>String: filename, File: imgfile</td> 
   <td>图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)</td> 
  </tr> 
  <tr> 
   <td>imgDel</td> 
   <td>String: filename</td> 
   <td>图片文件删除回调事件(filename: 写在md中的文件名)</td> 
  </tr> 
 </tbody> 
</table>

#### 代码高亮 ####

开启代码高亮props

<mavon-editor :ishljs="true"></mavon-editor>

6、图片上传

#### 图片上传 ####

<template>
        <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
    </template>
    <script>
    export default {
        methods: {
            // 绑定@imgAdd event
            $imgAdd(pos, $file){
                // 第一步.将图片上传到服务器.
               var formdata = new FormData();
               formdata.append('image', $file);
               axios({
                   url: 'server url',
                   method: 'post',
                   data: formdata,
                   headers: { 'Content-Type': 'multipart/form-data' },
               }).then((url) => {
                   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                   /**
                   * $vm 指为mavonEditor实例，可以通过如下两种方式获取
                   * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
                   * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
                   */
                   $vm.$img2Url(pos, url);
               })
            }
        }
    }
    </script>

#### 快捷键 ####

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

[-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[3f3022b00a3b1dafb2fffd97b1e242a0.gif]: https://img-blog.csdnimg.cn/img_convert/3f3022b00a3b1dafb2fffd97b1e242a0.gif
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[mavon-editor - npm]: https://www.npmjs.com/package/mavon-editor
[ac5381dd52fa7c8eda0815d604428bd8.png]: https://img-blog.csdnimg.cn/img_convert/ac5381dd52fa7c8eda0815d604428bd8.png
[c73087460e73ff3310456eeb5de9aa32.png]: https://img-blog.csdnimg.cn/img_convert/c73087460e73ff3310456eeb5de9aa32.png
[b1dd07eaf8d696567ee8fd4d727a7ee6.png]: https://img-blog.csdnimg.cn/img_convert/b1dd07eaf8d696567ee8fd4d727a7ee6.png