vue中使用Ueditor編輯器-記錄

1.下載資源

能夠直接從Ueditor的官方網站：ueditor.baidu.com/website/dow… 下載本身對應的資源-我下載的是jsp最新版本。

2.引入

（1）將下載到的下載資源直接引入到本身的項目中，我是放到、static/UE下了。

（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）不要忘記修改ueditor.config.js

/**
   * 編輯器資源文件根路徑。它所表示的含義是：以編輯器實例化頁面爲當前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。
   * 鑑於不少同窗在使用編輯器的時候出現的種種路徑問題，此處強烈建議你們使用"相對於網站根目錄的相對路徑"進行配置。
   * "相對於網站根目錄的相對路徑"也就是以斜槓開頭的形如"/myProject/ueditor/"這樣的路徑。
   * 若是站點中有多個不在同一層級的頁面須要實例化編輯器，且引用了同一UEditor的時候，此處的URL可能不適用於每一個頁面的編輯器。
   * 所以，UEditor提供了針對不一樣頁面的編輯器可單獨配置的根路徑，具體來講，在須要實例化編輯器的頁面最頂部寫上以下代碼便可。固然，須要令此處的URL等於對應的配置。
   * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
   */
  window.UEDITOR_HOME_URL = "/static/UE/";
複製代碼

3.使用

（1）首先須要一個容器

（2）設置初始寬高不須要px單位

（3）在頁面beforeDestroy()時，也就是頁面跳轉，關閉的時候記得要editor.destroy()將Ueditor摧毀，否則頁面會報錯。

（4）具體配置能夠去官方網站進行查看：fex.baidu.com/ueditor/

（5）圖片上傳的配置由於沒用，就沒仔細和後端配合了。

<template>
  <div>
    <div id="editor"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editor: null
    };
  },

  components: {},

  computed: {},

  mounted() {
    let that = this;
    this.editor = UE.getEditor("editor", {
      initialFrameWidth: "100%",
      initialFrameHeight: "240"
    });
    that.editor.ready(() => {
      that.editor.addListener("contentChange", function() {
        that.editor.ready(() => {
          let text = that.editor.getContent();
          that.$emit("change", text);
        });
      });
    });
  },
  created() {},
  beforeDestroy() {
    this.editor.destroy();
  },
  methods: {
    setData(text) {
      var that = this;
      this.editor.ready(() => {
        this.editor.setContent(text);
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>

複製代碼

使用中遇到的問題

1.文件路徑配置不對

這個個人緣由是在修改ueditor.config.js時，這個須要看本身項目文件是否在服務器的根目錄。

若是是根目錄，則這樣應該沒問題

個人線上是 http://---.com ---> /static/UE/

若是不是是根目錄 /static/UE/ 可是若是不在根目錄,則就會由於資源找不到形成這種錯誤,改成

域名是 http://---.com/damin/ ---> /damin/static/UE/

2.ZeroClipboard is not defined

這個網上有人說ZeroClipboard.js中修改下就好了，只是記錄下，目前沒試過！

以前

if (typeof define === "function" && define.amd) {
    define(function () {
      return ZeroClipboard;
    });
  } else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
    module.exports = ZeroClipboard;
  }else{
      window.ZeroClipboard = ZeroClipboard;
  }
 
複製代碼

改成

if (typeof define === "function" && define.amd) {
    define(function () {
      return ZeroClipboard;
    });
  } else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
    module.exports = ZeroClipboard;
  }
  window.ZeroClipboard = ZeroClipboard;
複製代碼