【Vue後臺管理 五】集成Tinymce富文本和markdown編輯器

集成Tinymce富文本和markdown編輯器

因爲我是使用的花褲衩的基礎模版，他有一套集成方案，因而了就照着集成富文本編輯器和MarkDown編輯器。效果以下。

集成富文本編輯器

集成富文本編輯器是很麻煩的一件事，以前也集成個CKEditor和UEditor，如今是照着花褲衩那個 集成方案， 按照他這個配套的 開發文檔
基本就能實現樣式了。我這裏就再也不贅述。

麻煩的就是修改圖片上傳

富文本圖片上傳到服務器

富文本編輯器右上角里面，花褲衩把那個上傳按鈕單獨抽出來了，能夠在這個組件看到

裏面的上傳就很簡單了，是集成的ElementUI的 el-upload組件，上傳回去，觸發this.$emit('successCBK', arr)父組件監聽事件，把上傳後的數組圖片放入富文本里面。

el-upload組件能夠參考個人這篇文章 https://www.charmcode.cn/article/2020-07-26_Vue_el_upload

富文本編輯器粘貼上傳圖片

首先聲明我這個截圖粘貼上傳有部分缺陷 詳情見我在思否的提問 https://segmentfault.com/q/10...
還有就是github issue提問 https://github.com/PanJiaChen...

因爲花褲衩那個集成方案沒有集成粘貼上傳，緣由好像是粘貼上傳是付費工程，因此我就本身手動集成粘貼上傳，這個其實也不難。

思路:監聽粘貼事件->獲取到圖片字節流上傳圖片->把上傳成功返回的圖片url插入到富文本里面

監聽粘貼事件

首先粘貼事件，我是在富文本的 textarea 監聽 @paste事件，可是不行，看文檔發現應該在初始化的時候，綁定事件，因而這樣操做。

initTinymce() {
  const _this = this
  window.tinymce.init({
    xxx..
    paste_data_images: false, // 粘貼圖片
    xxx...
    init_instance_callback: editor => {
      xxx...
      editor.on('paste', (evt) => {
        // 監聽粘貼事件
        this.onPaste(evt)
      })
    },
    xxx...
  })
},

上傳圖片，並插入數據

onPaste(event) {
    // 實現圖片粘貼上傳
    const items = (event.clipboardData || window.clipboardData).items
   
    // 搜索剪切板items 只取第一張
    if (items[0].type.indexOf('image') !== -1) {
      console.log('粘貼的是圖片類型')
      const file = items[0].getAsFile()
      const formData = new FormData()
      formData.append('file', file)
      // 上傳圖片
      UpLoadImg(formData).then(res => {
        console.log(res)
        if (res.code === 200) {
          // 放到內容當中 （圖片正常上傳沒問題）
          window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${res.data.image}" >`)
        } else {
          this.$message.error('圖片上傳失敗,聯繫開發人員')
        }
      })
    } else {
      console.log('粘貼的不是圖片，不能上傳')
    }
}

到這裏圖片粘貼上傳就行了，若是想控制默認圖片大小能夠本身加寬高樣式。

集成MarkDown編輯器

因爲花褲衩裏面的MarkDown集成方案有問題，https://github.com/panjiachen...
固然也有PR來修復 https://github.com/PanJiaChen... 可是目前合併。
因而了我打算本身手寫一個編輯器，而後用markdown組件渲染的，先後倒騰來兩天。

可是發現仍是開源的集成的方便，先後倒騰了一兩天，因而就放棄了。就使用了mavon-editor這款編輯器。
集成使用很簡單 https://github.com/hinesboy/m... 照着官方說明作就好了。

添加markdown組件

我在工具欄裏面，添加了一個語法參考的連接

<mavon-editor v-if="form.goods_desc_type===2" ref="md" v-model="form.goods_desc" code-style="atom-one-dark" style="height: 500px" @imgAdd="imgAdd" @imgDel="imgDel" >
            <template slot="left-toolbar-before">
              <a href="https://markdown-it.github.io/" target="_blank"><span class="el-icon-link" aria-hidden="true" title="語法參考"></span></a>
            </template>
          </mavon-editor>

圖片上傳，同時支持粘貼上傳

官網有demo@imgAdd="imgAdd"添加這個事件,而後給加ref="md"屬性，方便獲取到這個組件。
代碼以下

// markdown編輯器圖片上傳 支持截圖粘貼上傳
      imgAdd(pos, $file) {
        const formData = new FormData()
        formData.append('file', $file)
        UpLoadImg(formData).then(res => {
          console.log(res)
          if (res.code === 200) {
            // 放到markdown編輯器內容當中
            this.$refs.md.$img2Url(pos, res.data.image)
          }
        })
      }

總結

有哪些開源的組件，集成起來很簡單，花點時間看看文檔，不明白的地方搜下issues基本就能解決個七七八八了。

完整GitHub地址

GitHub地址參考我我的網站