小tips：vue結合百度UEditor富文本編輯器實現vue-ueditor-wrap

1.下載vue-ueditor-wrap

cnpm i vue-ueditor-wrap -S

下載最新的 UEditor 資源文件放入你項目的靜態資源目錄中（比如 static 或者 public，這取決於你項目的配置）。

2.引入VueUeditorWrap組件

import VueUeditorWrap from 'vue-ueditor-wrap'

3.注冊組件

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

4.v-model綁定數據

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

5.示例

<template>
  <div class="hello">
    <vue-ueditor-wrap ref="ueditor" v-model="msg" :destroy="false" :config="config" style="width: 600px;margin: 0 auto;"></vue-ueditor-wrap>
    <button @click="showData" class="preview">保存內容</button>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
export default {
  name: 'HelloWorld',
  components: {
    VueUeditorWrap
  },
  data () {
    return {
      msg: '請輸入內容',
      config: {
        // 編輯器不自動被內容撐高
        autoHeightEnabled: true,
        // 初始容器高度
        initialFrameHeight: 240,
        elementPathEnabled: false,
        wordCount: false,
        enableAutoSave: false,
        // 初始容器寬度
        initialFrameWidth: '100%',
        serverUrl: ''
      }
    }
  },
  mounted () {

  },
  methods: {
    showData () {
      console.log(this.msg)
    }
  }
}
</script>

詳細的配置可參考UEditor富文本編輯器官網。

參考地址

• UEditor富文本編輯器
• vue-ueditor-wrap github地址