Vue-cli3.0+TypeScript环境下使用百度富文本编辑器ueditor1.下载ueditorhttp://u

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