springboot+vue集成mavon-editor，開發在線文檔知識庫

先睹為快，來看下效果：

技術選型

SpringBoot、Spring Security、Oauth2、Vue-element-admin

集成mavon-editor編輯器

1. 安裝 mavon-editor

npm install mavon-editor --save

2. 引入mavon-editor

后台使用

---

• js文件：index.js

    // 全局注冊
    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: '' }
        }
    })

• html文件：index.html

<mavon-editor v-model="form.contents" ref=md @imgAdd="imgAdd" @imgDel="imgDel" style="min-height: 450px"/>

• 文件上傳

     // 綁定@imgAdd event
      imgAdd(pos, $file){
        // 第一步.將圖片上傳到服務器.
        var formData = new FormData();
        formData.append('file', $file);
        uploadFile(formData).then(response => {
          if (response.code === 0) {
            // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)
            // $vm.$img2Url 詳情見本頁末尾
            this.$refs.md.$img2Url(pos, response.data);
          } else {
            this.msgError(response.msg);
          }
        });
      },
      imgDel(pos, url) {
        console.log(pos)
        console.log(url)
      }

• 自定義工具欄

 /*
    默認工具欄按鈕全部開啟, 傳入自定義對象
    例如: {
         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
          class="md"
          :value="contents"
          :subfield = "false"
          :defaultOpen = "'preview'"
          :toolbarsFlag = "false"
          :editable="false"
          :scrollStyle="true"
          :ishljs = "true"
        />

contents是從數據庫中讀取的markdown格式數據

更多mavon-editor編輯器文檔：mavon-editor參考文檔

源碼地址：entfrm-boot 可插拔模塊化開發平台