1. 定義富文字單獨的元件

<template>
  <script  ref="editor" type="text/plain"></script>
</template>

<script>
  /* eslint-disable */
  import '../../static/ueditor/ueditor.config.js'
  import '../../static/ueditor/ueditor.all.js'
  import '../../static/ueditor/lang/zh-cn/zh-cn.js'
  export default {
    name:"ueditor",
    data() {
      return {
        id:'ueditorId'+Math.random().toString(16).substring(2) ,
        editor:null
      };
    },
    props: {
      value: {
        type: String,
        default: null,
      },
      config: {
        type: Object,
        default: function(){
          return {
            autoHeightEnabled: false,
            autoFloatEnabled: true,
            initialContent: "",
            autoClearinitialContent: true,
            initialFrameWidth: null,
            initialFrameHeight: 450,
            BaseUrl: "",
            UEDITOR_HOME_URL: "static/ueditor/"
          }
        },
      }
    },
    watch: {
    },
    mounted() {
      this.$nextTick(function f1() {
        // 保證 this.$el 已經插入文件
        this.$refs.editor.id = this.id;
        this.editor= UE.getEditor(this.id, this.config);
        this.editor.ready(function f() {
        }.bind(this));
      });
    },
    methods: {
      getUEContent: function () { //對外暴露的獲取富文字內容介面
        return this.editor.getContent();
      },
      setUEContent: function (data) {  //對外暴露的獲取富文字內容介面
        this.editor.ready(function f() {
          this.editor.setContent('<p>'+data+'</p>', false);
        }.bind(this));
      },
      destroyUE(){ //對外暴露銷燬元件介面
        // this.editor1.destroy();
      }
    }
  }
</script>
 

    2. 使用

//引入
inport ueditorOne from '元件位置'
//template部分
<ueditorOne ref="diseaseFileUeditor"></ueditorOne>
//使用
this.$refs.diseaseFileUeditor.setUEContent('要載入的資料。。。。。')
this.$refs.diseaseFileUeditor.getUEContent() //獲取富文字編輯後的內容