VUE使用UEditor，前后端分离

🤔前端使用步骤：

方案1.使用vue-ueditor-wrap对其封装使用

参考地址vue-ueditor-wrap 安装、封装及使用

方案2.自行对其封装成组件使用

具体步骤和方案一一致：

1. 下载UEditor（本文以jsp版本为例），解压后重命名为 UEditor，放入 vue 项目的 public 文件夹中
   
2. 新建一个 ueditor 组件，并做好UEditor相关配置

<template>
  <div>
    <div :id="editorId" class="editor-class"></div>
  </div>
</template>
<script>
import "../../../public/UEditor/ueditor.config";
import "../../../public/UEditor/ueditor.all.min";
import "../../../public/UEditor/ueditor.parse.js";
import "../../../public/UEditor/lang/zh-cn/zh-cn.js";
import "../../../public/UEditor/themes/default/css/ueditor.css";
export default {
  name: "UEditor",
  props: {
    /* 编辑器Id */
    editorId: {
      type: String,
      default: ""
    },
    /* 编辑器的内容 */
    value: {
      type: String,
      default: ""
    },
    /* 高度 */
    height: {
      type: Number,
      default: 400
    }
  },
  data() {
    return {
      editor: null,
      config: {
        // 富文本层级
        zIndex: 999,
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 400,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口（修改成自己的接口地址）
        serverUrl: process.env.VUE_APP_BASE_API + "/XXXX",
        // UEditor 资源文件的存放路径
        UEDITOR_HOME_URL: "/UEditor/",
      }
    };
  },
  mounted() {
    /**
     * 初始化编辑器，并设置值
     */
    this.editor = UE.getEditor(this.editorId, this.config);
    this.editor.addListener("ready", () => {
      this.editor.setContent(this.value);
    });
    /**
     * 监听编辑器，当编辑器中输入内容时与父组件进行同步
     */
    this.editor.addListener("contentChange", () => {
      this.$emit("input", this.editor.getContent());
    });
  },
  methods: {
    getUEContent() {
      return this.editor.getContent();
    },
    setUEContent(value) {
      return this.editor.setContent(value);
    }
  },
  destroyed() {
    this.editor.destroy();
  }
};
</script>
<style type="text/less" scoped>
/* element-ui与UEditor样式冲突解决方案 */
.editor-class {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.42;
    height: 100%;
    outline: none;
    padding: 0 !important;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    word-wrap: break-word;
}
</style>

3. 在需要用到的地方引入该组件

<ueditor editor-id="demo" :value="content" @input="Uinput"></ueditor>

import ueditor from "@/components/ueditor/index";

components: { ueditor },

methods: {
	// 获取富文本的值
    Uinput(val) {
      this.content = val
    },
}

可能遇到的问题

1，header 问题（详情请见方案一）

2，视频问题（详情请见方案一）

3，element-ui与UEditor样式冲突

解决方案：给组件增加以下样式

<style type="text/less" scoped>
.editor-class {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.42;
    height: 100%;
    outline: none;
    padding: 0 !important;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    word-wrap: break-word;
}
</style>

4，项目中多处使用UEditor，定义不同的editorId即可