先下載一個富文字編輯器（官網地址）

在vue中新建一個editor.vue

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>

<script>
export default {
  name: 'UE',
  data () {
    return {
      editor: null
    }
  },
  props: {
    defaultMsg: {
      type: String
    },
    config: {
      type: Object
    }
  },
  mounted() {
    const _this = this;
    this.editor = UE.getEditor('editor', 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>

<style>

</style>
 

 把下載好的uditor壓縮資料夾放在static中

改一下config裡面的這一行（第一行）。

然後在需要用到的vue中使用它，具體如下：

<template>
    <div class="components-container">
       <div class="info"></div>
       <div class="editor-container">
       <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
       </div>
    </div>
</template>

<script>
import UE from '../../editor.vue';
export default {
    components: {UE},
    data () {
        return: {
          defaultMsg: '這裡是UE測試',
          config: {
            initialFrameWidth: null,
            initialFrameHeight: 350
          },
        }    
    }
}
</script>

<style>
.info{
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
</style>
 

然後效果就出來了。嗯，，如果感覺上面的功能太多了。可以看[文件]

還有圖片的路徑。反正我的圖片出不來，所以正在改。。。