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，看到会第一时间回复，后续将会写怎么配合图片上传两种方式，可使用自带的上传，获取使用本身封装的上传，都会一一讲解，敬请期待