在vue中使用Ueditor

今天研究的主角是：UEditor

UEditor是由百度WEB前端研發部開發的所見即所得的開源富文本編輯器，具有輕量、可定制、用戶體驗優秀等特點。

版本有很多

我用的是：[1.4.3.3 PHP 版本] UTF-8版 

下載地址：http://ueditor.baidu.com/website/download.html

安裝下載之后，將插件解壓放在static目錄下： static/ue/

修改ueditor.config.js,配置目錄 ：

window.UEDITOR_HOME_URL = "/static/ue/";

ps：這個插件的代碼寫的真的是”與眾不同“，如果你用eslint檢查代碼，並且是個強迫症患者，那就很歡樂了。

 

下面是相關代碼：

新建組件 /src/base/ueditor/ueditor.vue

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: "ue",
  data() {
    return {
      editor: null
    };
  },
  props: {
    value: "",
    config: {}
  },
  mounted() {
    const _this = this;
    this.editor = window.UE.getEditor("editor", this.config);
    // 初始化UE
    this.editor.addListener("ready", function() {
      _this.editor.setContent(_this.value);
      // 確保UE加載完成后，放入內容。
    });
  },
  methods: {
    getUEContent() {
      // 獲取內容方法
      return this.editor.getContent();
    }
  },
  destroyed() {
    this.editor.destroy();
  }
};
</script>

在組件中引用

<template>
    <div>
        <Ueditor :value="ueditor.value" :config="ueditor.config" ref="ue"></Ueditor>
        <input type="button" value="顯示編輯器內容（從控制台查看）" @click="returnContent">
      </div>

</template>

<script>
import Ueditor from "../../base/ueditor/ueditor";
export default {
  data() {
    return {
      dat: {
        content: "",
      },
      ueditor: {
        value: "編輯默認文字",
        config: {}
      }
    };
  },
  methods: {
    returnContent() {
      this.dat.content = this.$refs.ue.getUEContent();
      console.log(this.dat.content);
    },
    showContent() {
      this.show = !this.show;
    }
  },
  components: {
    Ueditor
  }
};
</script>

下面來看看要實現的效果：