Vue 中使用UEditor富文本編輯器-親測可用-vue-ueditor-wrap

1、Vue中在使用Vue CLI開發中默認無法使用UEditor

其中UEditor中也存在很多錯誤，再引用過程當中。

可是UEditor相對仍是比較好用的一個富文本編輯器。

vue-ueditor-wrap說明

Vue + UEditor + v-model 雙向綁定。之因此有這個 repo 的緣由是：
 一、UEditor 依然是國內使用頻率極高的所見即所得編輯器而 Vue 又有着普遍的使用，因此將二者結合使用，是不少 Vue 項目開發者的切實需求。
 二、目前沒有發現知足這種需求，而使用又很方便的 repo、有的可能也只是簡單的暴露一個 UEditor 的實例，仍然須要開發者手動去調用 getContent，setContent，而經過 v-model 綁定數據也是不少人期待的方式。

官方地址：https://github.com/HaoChuan9421/vue-ueditor-wrap

2、使用步驟

1.安裝vue-editor-wrap

npm i vue-ueditor-wrap

2.下載處理後的UEditor，下載地址

解壓，重命名文件夾爲UEditor，放入public文件夾下（若是是舊項目對應static文件夾）。

3.引用組件、註冊組件

import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
export default {
  name: "app",
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      msg:
        '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model雙向綁定!+!$#</h2>',
      myConfig: {
        UEDITOR_HOME_URL: "/UEditor/",
        serverUrl: ""
      }
    };
  },
  methods: {
    showOne() {
      alert(this.msg);
    }
  }
};

4.v-model綁定數據

<template>
  <div id="app">
    <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
    <p>
      <el-button type="primary" @click="showOne();">獲取編輯器內容</el-button>
    </p>
  </div>
</template>

3、使用說明

1.根據項目需求修改從組件處修改配置

<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/'
    }
  }
}

2.也能夠全局修改vue-ueditor-wrap.vue    源碼

4、最終顯示結果：

 

更多：

更多問題參考https://github.com/HaoChuan9421/vue-ueditor-wrap

Vue +Element UI後臺管理模板搭建示例

Vue Element表單綁定（三）綜合示例

 Vue Element表單綁定（三）表單驗證2