1.放入靜態資源並配置

首先把官網下載的Ueditor資源，放入靜態資源src/static中。

修改ueditor.config.js中的window.UEDITOR_HOME_URL配置，如下圖：

2.引入

在main.js中引入

import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

3.開發公共元件

開發公共元件，可設定填充內容defaultMsg，配置資訊config(寬度和高度等)，並提供獲取內容的方法。

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null，id: Math.random().toString(16).substring(2) + 'ueditorId'

      }
    },
    props: {
      defaultMsg: {
        type: String
 

      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.$refs.editor.id = this.id;
      this.editor = UE.getEditor(this.id, this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 確保UE載入完成後，放入內容。
 

      });
    },
    methods: {
      getUEContent() { // 獲取內容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

4.使用

當我們需要使用富文字編輯器時，直接呼叫公共元件即可

<template>
  <div class="components-container">
    <div class="info">UE編輯器示例<br>需要使用編輯器時，呼叫UE公共元件即可。可設定填充內容defaultMsg，配置資訊config(寬度和高度等)，可呼叫元件中獲取內容的方法。</div>
    <button @click="getUEContent2()">獲取內容</button>
    <div class="editor-container">
      <UE :defaultMsg=defaultMsg :config=config ref="ue1"></UE>
    </div><button @click="getUEContent2()">獲取內容</button><div class="editor-container">     <UE :defaultMsg=defaultMsg :config=config ref="ue2"></UE></div>
  </div>
</template>
<style>
  .info{
    border-radius: 10px;
    line-height: 20px;
    padding: 10px;
    margin: 10px;
    background-color: #ffffff;
  }
</style>
<script>
  import UE from '../../components/ue/ue.vue';
  export default {
    components: {UE},
    data() {
      return {
        defaultMsg: '這裡是UE測試',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        }
      }
    },
    methods: {
      getUEContent2() {
        let content = this.$refs.ue.getUEContent();
        
        console.log(content)
      }， getUEContent2() {        let content = this.$refs.ue.getUEContent();        console.log(content)      }
    }
  };
</script>

效果如下：

5.報錯

ESlint報錯

eslint報錯的參考請評論4L 5L

嚴格模式報錯

部分人使用時出現以下報錯：
Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them...
這個問題是因為專案中的使用的babel預設添加了use strict造成，可參考 https://segmentfault.com/q/1010000007415253
我採用的是連結中答案的第三種方式：添加了babel-plugin-transform-remove-strict-mode，並在.babelrc裡新增下列程式碼

{
  "plugins": ["transform-remove-strict-mode"]
}

然後就沒問題了。