Vue-cli3.0+TypeScript環境下使用百度富文本編輯器ueditor

1.下載ueditor

ueditor.baidu.com/website/dow… 根據本身後端那邊的語言來選擇,我這邊後端使用的是JAVA

2.放在指定目錄下面

首先咱們要區分vue2.0和3.0的區別，Vue2.0通常資源是放在static目錄下面，在Vue3.0中沒有這個目錄，因此咱們放在public目錄下面

最好給源文件改一個名字，這樣好區分，我這邊改成了UE

3.前端配置

這邊先說一下3.0項目中怎麼使用，咱們打開UE目錄下的ueditor.config.js

修改URL

var URL =   process.env.BASE_URL+"UE/" || getUEBasePath();
複製代碼

4.引入

在main.ts中加入如下配置

import '../public/UE/ueditor.config'
import '../public/UE/ueditor.all'
import '../public/UE/lang/zh-cn/zh-cn'
複製代碼

5.寫組件

<!--
 * @Description: 富文本編輯器組件
 * @Author: pjy
 * @Date: 2019-08-09 19:39:13
 * @LastEditTime: 2019-10-16 19:03:18
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="uedtior">
    <div :id="id"></div>
  </div>
</template>
<script lang="ts">
import { Prop, Vue, Component, Watch, Emit } from "vue-property-decorator";

@Component({
  name: "UE"
})
export default class UE extends Vue {
  @Prop()
  config?: object;
  @Prop()
  id?: string;
  @Prop({default: ""}) value?: string;
  editor: any = null;
  mounted() {
    this.editor =(window as any).UE.getEditor(this.id, this.config);
    this.editor.addListener("ready", () => {
      this.editor.setContent(this.value); // 確保UE加載完成後，放入內容。
      this.editor.addListener("contentChange", () => {
        this.$emit("ueditorContent", this.editor.getContent()); //內容發生變化，觸發input事件，此處是爲了實現v-mode功能
        this.$emit("ueditorContentText", this.editor.getContentTxt()); //內容發生變化，觸發input事件
      });
    });
  }
  getUEContent() {
    return this.editor.getContent();
  }

  getUEContentText() {
    return this.editor.getContentTxt();
  }

  destroyed() {
    this.editor.destroy();
  }
}
</script>
<style lang="less" scoped>
</style>

複製代碼

特別提醒:組件的命名必定要用UE，否則TS的語法檢查會提示找不到UE，打包編譯會不過，這裏卡了我一段時間，而且調用的方式也須要改變，必需要(window as any).UE

6在父組件中引用

import UE from "../components/rich-text-editor/ueditor.vue";
@Component({
  name: "xxx",
  components: {
    UE
  }
})
複製代碼

<UE
    :value="ueditorDefault.answerContentValue"
    @ueditorContentText="answerContentText"
    :id="ueditorIdArr.answerContentUeditorId"
    :config="ueditorConfig"
></UE>
複製代碼

ueditorConfig: any = {
    autoHeightEnabled: false,
    autoFloatEnabled: false,
    initialFrameHeight: 200,
    initialFrameWidth: null,
    //關閉字數統計
    wordCount: false,
    //關閉elementPath
    elementPathEnabled: false,
    enableAutoSave: false,
    serverUrl: "填寫本身後端服務器的處理上傳的接口",
    toolbars: [
      [
        "fullscreen",
        "source",
        "|",
        "undo",
        "redo",
        "|",
        "bold",
        "italic",
        "underline",
        "fontborder",
        "strikethrough",
        "superscript",
        "subscript",
        "removeformat",
        "formatmatch",
        "autotypeset",
        "pasteplain",
        "|",
        "forecolor",
        "backcolor",
        "selectall",
        "cleardoc",
        "|",
        "customstyle",
        "paragraph",
        "fontfamily",
        "fontsize",
        "|",
        "justifyleft",
        "justifycenter",
        "justifyright",
        "justifyjustify",
        "insertimage"
      ]
    ]
  };
複製代碼

7.可能遇到的坑以及錯誤

1.請先檢查本身的vue-cli的版本這點很重要，由於版本不同配置不一樣，這裏列舉兩點不一樣

首先是文件路徑不一致，2.0在static下，3.0在public下面

其次是配置文件的配置URL不同

2.0是window.UEDITOR_HOME_URL="/static/UE/"
複製代碼

3.0是var URL =   process.env.BASE_URL+"UE/" || getUEBasePath();
複製代碼

2.servelUrl:要填寫正確

3.出現如下錯誤以及解決辦法

這個錯誤就是URL配置不對，請參考第一點解決

8.總結

以前多個環境中使用過Ueditor,最開始是沒有先後端分離的項目SSM+freemarker，還有前端使用avlon.js來弄，坑都相較於少一點 主要是網上typescript資源比較少，因此須要本身摸索，若是有問題能夠留言私信都OK，看到會第一時間回覆，後續將會寫怎麼配合圖片上傳兩種方式，可使用自帶的上傳，獲取使用本身封裝的上傳，都會一一講解，敬請期待