vue+富文本編輯器UEditor

vue+富文本編輯器UEditor

 

昨天的需求是把textarea換成富文本編輯器的形式，

網上找了幾種富文本編輯器ueditor、tinymce等，

覺得ueditor實現雙向綁定還挺有意思，

分享一下～

 

按照下面步驟即可

 

前言

vue2  https://github.com/yangTwo100/vue2UEditor

vue-cli3

 

 

安裝插件

npm i vue-ueditor-wrap
// 或者 yarn add vue-ueditor-wrap

 

 

下載最新編譯的UEditor

你可以登陸官網下載也可以使用一個修復好的版本

點擊連接修復好的內容如圖所示：

 

根據你的需要下載這八個中的一個即可。

將下載好的壓縮包解壓並命名為UEditor

放入你的static目錄下

 

 

引入VueUeditorWrap組件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module // 或者 const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS

 

 

注冊組件

components: {
  VueUeditorWrap
}
// 或者在 main.js 里將它注冊為全局組件 Vue.component('vue-ueditor-wrap', VueUeditorWrap)

 

 

v-model綁定數據

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

data () {
  return { msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model雙向綁定</h2>' } }

至此你已經可以在頁面中看到一個初始化之后的 UEditor 了，並且它已經成功和數據綁定了！👏👏👏

 

 

根據項目需求修改配置

完整配置選項查看ueditor.config.js源碼或者官方文檔

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

data () {
  return { msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model雙向綁定</h2>', myConfig: { // 編輯器不自動被內容撐高 autoHeightEnabled: false, // 初始容器高度 initialFrameHeight: 240, // 初始容器寬度 initialFrameWidth: '100%', // 上傳文件接口（這個地址是我為了方便各位體驗文件上傳功能搭建的臨時接口，請勿在生產環境使用！！！） serverUrl: 'http://35.201.165.105:8000/controller.php', // UEditor 資源文件的存放路徑，如果你使用的是 vue-cli 生成的項目，通常不需要設置該選項，vue-ueditor-wrap 會自動處理常見的情況，如果需要特殊配置，參考下方的常見問題2 UEDITOR_HOME_URL: '/static/UEditor/' } } }

 

 

常見報錯

這是 UEDITOR_HOME_URL 參數配置錯誤導致的。在 vue cli 2.x 生成的項目中使用本組件，默認值是 '/static/UEditor/'，在 vue cli 3.x 生成的項目中，默認值是 process.env.BASE_URL + 'UEditor/' 。但這並不能滿足所有情況。例如你的項目不是部署在網站根目錄下，如"http://www.example.com/my-app/"，你可能需要設置為"/my-app/static/UEditor/"。是否使用了相對路徑、路由是否使用 history 模式、服務器配置是否正確等等都有可能會產生影響。總而言之：無論本地開發和部署到服務器，你所指定的 UEditor 資源文件是需要真實存在的，vue-ueditor-wrap也會在 JS 加載失敗時通過 console 輸出它試圖去加載的資源文件的完整路徑，你可以借此分析如何填寫。當需要區分環境時，你可以通過判斷 process.env.NODE_ENV 來分別設置。

 

vue-cli3的區別

1、將下載好的壓縮包解壓並命名為UEditor放入你的public目錄下

2、配置UEDITOR_HOME_URL的時候寫成'/UEditor/'

data () {
  return { msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model雙向綁定</h2>', myConfig: { // 編輯器不自動被內容撐高 autoHeightEnabled: false, // 初始容器高度 initialFrameHeight: 240, // 初始容器寬度 initialFrameWidth: '100%', // 上傳文件接口（這個地址是我為了方便各位體驗文件上傳功能搭建的臨時接口，請勿在生產環境使用！！！） serverUrl: 'http://35.201.165.105:8000/controller.php', // UEditor 資源文件的存放路徑，如果你使用的是 vue-cli 生成的項目，通常不需要設置該選項，vue-ueditor-wrap 會自動處理常見的情況，如果需要特殊配置，參考下方的常見問題2 UEDITOR_HOME_URL: '/UEditor/' } } }

 

以上。