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的區別

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

二、配置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/'
    }
  }
}

 

 

 

 

以上。