需求

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

做法

當時看到這個需求，我覺得是不難的,就去github上找富文本編輯器，因為項目比較急，當時我的想法是能找開箱即用的就找開箱即用的。

這幾個編輯器都試了一次,最后經過篩選

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

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

引入ueditor

下載地址和文檔

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

我們要去ueditor.config.js文件里面去改一下路徑配置

修改樣式

引入ueditor之后，直接讓工具欄隱藏起來，然后我們自己新建一個div模擬toolbars

隱藏之后的ueditor就是一個類似div加了可編輯屬性的既視感

接下來我們直接一個div，然后給他一個flex布局，然后去iconfont上面下載一些圖標，但是我們需要配置一下webpack使他支持批量處理svg,參考手摸手系列

現在就大變身了，樣子非常好看，跟現代的編輯器沒什么差別

給圖標綁定點擊事件

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

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 = falsesetTimeout(() => {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)},

缺點

組件太大，默認壓縮也有389k,開啟gzip之后有100k左右

優點

功能強大，產品需求可迭代。

補充

當然這個是我項目中抽取出來的，不是完整的代碼，只是一個思路吧。第一次做富文本，要是說錯了大家多多指正，或者大家有更好的思路歡迎一起討論

代碼地址

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的vue结合ueditor富文本编辑器（换肤分离）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。