前言

上圖是UEditor的 百度指數 折線圖。雖然今天已經是 2018 年，且優秀的富文字編輯器層出不窮（包括移動端），但從圖中可以看出UEditor仍然維持著較高的搜尋熱度。而不少公司和個人也仍然在專案中使用UEditor。目前，UEditor官網的最後一次版本更新是 1.4.3.3，這已經是 2016 年的事情了，而今天的前端開發，很多小夥伴都在使用Vue，React 這種元件化的前端框架。這就導致在這些“現代”框架中整合UEditor變得很不平滑。所以才會有下圖這些大量介紹如何在Vue專案中整合UEditor的部落格：

為了提高程式碼的可複用性，也為了儘可能的不在業務程式碼中參雜UEditor

先看效果圖：

點選預覽

安裝

npm i vue-ueditor-wrap

快速開始（基於vue-cli 2.x，完整DEMO）

1. 下載 最新編譯的資原始檔。官網下載的版本是1.4.3.3

   ,存在諸多BUG，例如 Issue1 和 Issue8，且官方不再積極維護。針對一些 BUG，我進行了修復，並把編譯好的檔案放在了 GitHub倉庫 的dist目錄下，你可以放心下載，當然你也可以自己clone官方原始碼並編譯。

   

   將dist目錄下的UEditor資原始檔解壓並重命名為UEditor（只需要選擇一個你需要的版本,比如utf8-php)，放入你專案的static目錄下）

   

   如果你使用的是 vue-cli 3.x, 把資原始檔解壓並重命名為UEditor，然後放入你專案的public目錄下， 並在第五步新增配置 UEDITOR_HOME_URL: './UEditor/'

2. 引入VueUeditorWrap元件

   import VueUeditorWrap from 'vue-ueditor-wrap'

3. 註冊元件

   components: {
       VueUeditorWrap
   },

4. v-model繫結資料

   <vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>

   data () {
       return {
           msg: '<h2>Hello World!</h2>'
       }
   }

   至此你已經可以在頁面中看到一個初始化之後的UEditor了，並且它已經成功和資料綁定了。

5. 根據專案需求修改配置，完整配置選項檢視ueditor.config.js原始碼或 官方文件

   <vue-ueditor-wrap :config="myConfig"></vue-ueditor-wrap>

   data () {
       return {
           myConfig: {
               // 如果需要上傳功能,找後端小夥伴要伺服器介面地址
               // serverUrl: 'http://api.demo.com/ueditor/upload',
               // 你的UEditor資源存放的路徑,相對於打包後的index.html
               UEDITOR_HOME_URL: './static/UEditor/',
               // 編輯器不自動被內容撐高
               autoHeightEnabled: false,
               // 初始容器高度
               initialFrameHeight: 240,
               // 初始容器寬度
               initialFrameWidth: '100%',
               // 關閉自動儲存
               enableAutoSave: false
           }
       }
   }

   如何獲取UEditor例項等的更詳細使用介紹，可以參考GitHub的 README.md

特點

1. v-model雙向資料繫結！簡單、易用。你只需要像繫結input框一樣繫結vue-ueditor-wrap元件即可，你的程式碼裡將沒有例項化，沒有getContent,setContent等。

2. 完全遵從官方API。所有的配置引數和例項方法與官方完全一致，通過給vue-ueditor-wrap元件的config屬性傳遞一個物件，你就可以得到一個完全獨立配置的UEditor編輯器。你甚至可以在上面使用v-for一次渲染99個兔斯基(不要忘記新增key值)。

3. 自動新增依賴檔案。你不需要自己在index.html或main.js裡引入UEditor的js檔案。更重要的是即使你在一個頁面裡同時使用多個vue-ueditor-wrap元件，它所依賴的js檔案也只會載入一次。這麼做的原因在於你不需要當用戶一開啟專案就先載入大量UEditor相關的資源，所有的資原始檔只會在vue-ueditor-wrap元件第一次被啟用時才載入。當然如果你在index.html或main.js裡提前引入了相關資源，vue-ueditor-wrap也會準確判斷，你不用擔心它會重複載入資源。

常見問題

1. 是否支援IE等低版本瀏覽器？

   支援IE9！！！

   

2. 為什麼我會看到這個?

   

   這是因為你的UEDITOR_HOME_URL路徑填寫錯誤，請參考步驟5

3. 為什麼我會看到後臺配置項返回格式出錯？我如何上傳圖片和檔案？

   

   UEditor的上傳圖片、檔案等是需要與後臺配合的功能，而你沒有在config中設定正確的serverUrl,去找你的後端小夥伴要吧！

   

4. 為什麼我輸入"? ! $ #" 這些特殊字元，沒有繫結上去？

   那時因為v-model的實現基於對UEditor例項上contentChange事件的監聽，由於你輸入這些特殊字元時通常是按住shift鍵的，UEditor本身的contentChange在shift鍵按住時不會觸發，你也可以嘗試同時按下多個鍵，你會發現contentChange只觸發一次。所有我也很無奈呀！請移步 UEditor。

5. 單圖片上傳後v-model繫結的是loading小圖示。

   在我最新編輯的資原始檔中，已經修復了官方1.4.3.3的這個 BUG,如果你使用的是官網下載的資原始檔,請替換資原始檔或參見 Issue1。

總結

雖然這是一次很小的創新，UEditor也可能是一個過氣的富文字編輯器。但是在維護這個專案以及幫助一眾小夥伴解決ISSUE的過程中，我成長了很多。最令我感動的是不少小夥伴還給我郵箱發了感謝信，而且我還發現確實已經有一些人開始在專案中用了。這種被他人認可，以及幫助別人的快樂真的只有體會過的人才知道。也就在前不久，我決定開始在掘金寫部落格，雖然一些東西寫的不那麼好，或者自己認知有錯誤，但總有一群熱心且優秀的小夥伴，會在評論區指正以及給出寶貴的意見。分享是快樂的！所以，我的這篇文章也權當拋磚引玉，如果小夥伴們有好的建議或更炫酷的操作，也歡迎PR，不過PR之前請先執行npm run lint進行程式碼風格檢測，大部分語法細節也可以通過npm run fix修正，也要記得修改package.json的版本號version，方便我直接釋出到npm。當然如果你有好用的富文字編輯器，也可以在評論區推薦。