vue-cli3項目中使用vue-ueditor-wrap

Vue + UEditor + v-model 雙向綁定

 

一、安裝

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

二、下載文件，vue-ueditor-wrap 作者修定版（https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads）

三、下載完成的壓縮包，修改文件名為 ueditor ，並放置項目目錄下的public的目錄中

四、修改 ueditor 文件中的 ueditor.config.js 配置為：

window.UEDITOR_HOME_URL = '/ueditor/'

五、組件引用

　　1.組件內注冊使用

// 引入組件
import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module

// 注冊組件
components: {
  VueUeditorWrap
}

// 雙向綁定
<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>

data () {
  return {
      msg: '這是 vue-ueditor-wrap ！'
    }  
}

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

data () {
  return {
      msg: '這是 vue-ueditor-wrap ！',
      config: {
          UEDITOR_HOME_URL: '/ueditor/'  // 需要令此處的URL等於對應 ueditor.config.js 中的配置。
       }
    }  
}

 

　

　　2.全局注冊使用

　　

// 在 main.js 中引入
import VueUeditorWrap from 'vue-ueditor-wrap'

// 全局注冊組件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

// 在組建中直接使用
<vue-ueditor-wrap v-model="msg" :config="config"></vue-ueditor-wrap>

 

 

多圖上傳功能配置