vue結合ueditor富文本編輯器（換膚分離）

時間 2019-11-15

標籤 vue 結合 ueditor 文本編輯器分離简体版

原文原文鏈接

需求

(PC端)作一個可使用圖片上傳、視頻上傳、文件上傳功能的富文本組件，簡單的文本編輯發佈功能,採用socket方式傳輸，html

作法

當時看到這個需求，我以爲是不難的,就去github上找富文本編輯器，由於項目比較急，當時個人想法是能找開箱即用的就找開箱即用的。 vue

這幾個編輯器都試了一次,最後通過篩選webpack

Vue-Quill-Editor：不支持本地視頻上傳
vue-froala-wysiwyg：我想要的功能都有包括圖片和視頻上傳，還額外支持響應式，可是是收費的
ueditor:功能很全，可是樣式實在是很醜,可能要本身封裝
剩下的編輯器基本上要麼是功能不足或者是移動端的(優勢是輕量)

由於沒作過富文本的開發，因此當時我測試這些富文本就花了一個下午，後來仔細考慮了一下，最後使用了比較保守的方式，用了ueditor開發，順便美化了一下。git

引入ueditor

下載地址和文檔github

import '../../static/UEditor/ueditor.config'
import '../../static/UEditor/ueditor.all.min'
import '../../static/UEditor/lang/zh-cn/zh-cn'

咱們要去ueditor.config.js文件裏面去改一下路徑配置 web

修改樣式

引入ueditor以後，直接讓工具欄隱藏起來，而後咱們本身新建一個div模擬toolbars緩存

隱藏以後的ueditor就是一個相似div加了可編輯屬性的既視感

接下來咱們直接一個div，而後給他一個flex佈局，而後去iconfont上面下載一些圖標，可是咱們須要配置一下webpack使他支持批量處理svg,參考手摸手系列bash

如今就大變身了，樣子很是好看，跟現代的編輯器沒什麼差異

給圖標綁定點擊事件

通過上面的步驟，樣式基本上搞定了，剩下來就是使他們點擊的時候，觸發事件，讓他們作出相應的動做就行，例如socket

execCommand: function (name) {
      this.editor.execCommand(name)
    },
複製代碼

插入圖片，插入視頻，插入文件這種操做，我並無使用ueditor內置的功能，視頻和文件夾我作成了進度條的形式，放在了富文本編輯器的下邊，圖片上傳成功後返回值拼接起來，根據雙向綁定，在editor組件內部動態建立圖片，點擊這三個圖標，會把事件拋出來，這樣你想用什麼上傳組件就用哪一個，你還能夠用socket進行上傳等等，這樣子，editor組件內部只須要維護編輯器的html文本就能夠，職責單一，後期也好維護編輯器

editorData: {
        body: '',
        images: []
      },
複製代碼

本地保存功能

最後添加了一個自動保存的功能,這裏能夠用定時器或者當內容發生變化的時候存到localStorage裏面。

autoSaveBody () {
      if (this.isAutoSaved && this.editorData.body) {
        let storage = {}
        Object.assign(storage, this.editorData)
        const pms = JSON.stringify(storage)
        this.isAutoSaved = false
        setTimeout(() => {
          localStorage.setItem(this.storageKey, pms)
          this.isAutoSaved = true
        }, 500)
      }
    }
複製代碼

可是必需要考慮一個狀況，當前是第一次寫仍是發佈以後進行修改，因此外部使用的時候，你只須要操做innerValue這個屬性，這個屬性的值你能夠經過後臺來獲取(後臺獲取的就是修改狀態)，而後編輯器就會呈現什麼樣的數據,內部的實現方式就是加了一個init函數

init: function () {
      // 外部有默認值
      if (this.value.body) {
        this.editor.setContent(this.value.body)
      } else {
        // 有本地緩存
        const storage = localStorage.getItem(this.storageKey)
        if (storage) {
          const storageJson = JSON.parse(storage)
          Object.assign(this.editorData, storageJson)
          if (this.editorData.body) {
            this.editor.setContent(this.editorData.body)
          }
        } else {
          // 沒有本地緩存
          Object.assign(this.editorData, this.$options.data().editorData)
        }
      }
      this.autoSaveInterval = setInterval(() => {
        this.autoSaveBody()
      }, 5000)
    },
複製代碼