vue項目中引入百度UEditor

1.因為百度的ueditor還沒有可以在vue項目中直接使用的 插件，所以使用百度的插件的話需要自己去官網下載；

官網地址為：http://ueditor.baidu.com

git 倉庫地址為：https://github.com/fex-team/ueditor

2.下載之后解壓，把以下下文件放到項目中的static文件夾下，新建一個文件夾名字為ue;

 

 

 

 3.放入到項目中之后要修改ueditor.config.js這個文件，主要修改一下地方;

 

 

 (注意：本地和打包之后文件路徑要進行修改，打包的路徑為xxxx/xxxx/;)

還有一個地方需要注意，如果需要上傳文件或者是圖片則需要配置后台的路徑，如果不需要，則要把以下地方注釋，否則無法使用

 

 

 

 4.編寫ue組件

<template>
  <div>
    <script :id=id type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: 'UE',
  data() {
    return {
      editor: null,
    };
  },
  props: {
    config: {
      type: Object,
    },
    id: {
      type: String
    },
    content: {
      type: String
    },
  },
  mounted() {
    this._initEditor();
  },
  methods: {
    _initEditor() { // 初始化
      this.editor = window.UE.getEditor(this.id, this.config);
    },
    getUEContent() { // 獲取含標簽內容方法
      return this.editor.getContent();
    },
  },
  destroyed() {
    this.editor.destroy();
  },

};
</script>

5.在需要的使用的組件中引入即可

  <template>
    <div>
      <div style="position: relative;z-index: 1;width: 100%;">
        <UE :id=id :config=config  ref="ue"></UE>
      </div>
    
    </div>
  </div>
</template>
<script>
  import UE from '@/components/ue';

  export default {
    components: {
      UE,
    },
    data() {
      return {
        // 初始化Ueditor配置參數
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 300,
        },
      };
    },
    methods: {
      getEdiotrContent() {
        const content = this.$refs.ue.getUEContent(); // 調用子組件方法
        this.articleData.articleContent = content;
      },
    },
  
  };
</script>

以上用法可適用於vue2.0的，在vue3.0中有點區別的地方就是：

1.下載的文件需要放在public文件下，同樣的需要創建新的文件夾存放；

2.ueditor.config.js文件中路徑的配置需要修改，若還是/XXXX/XXXX/的形式，會報ZeroClipoard is not defined;此時，路徑應該改為：/xxxx/;

打包路徑為：XXXX/;