vue-cli中如何集成UEditor 富文本编辑器？

佚名 7年前 (2019-04-22) 随笔 2057人围观抢沙发百度已收录

1.根据后台语言下载对应的editor插件版本

　　地址：https://ueditor.baidu.com/website/download.html

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

2.将下载好的资源放在/static/ueditor目录下

　　修改ueditor.config.js配置文件：

　　　　《a》指定编辑器资源文件根目录

　　　　　　 window.UEDITOR_HOME_URL = "/static/ueditor/"; 　　　　　　var URL = window.UEDITOR_HOME_URL || getUEBasePath(); 　　　　　　　　《b》服务器需要做的配置

　　　　　　出现如下错误：后台配置项返回格式出错，上传功能将不能正常使用！

　　　　　　原因没有配置服务器的请求接口

　　　　　　　　// 服务器统一请求接口路径　　　　　　　　serverUrl: "http://192.168.1.211:8888/api/private/v1/UEditor"

3.将编辑器集成到项目中

　　《1》src/main.js

import '../static/ueditor/ueditor.config.js'
import '../static/ueditor/ueditor.all.min.js'
import '../static/ueditor/lang/zh-cn/zh-cn.js'
import '../static/ueditor/ueditor.parse.min.js'

　　《2》src/components/ueditor/index.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() {
    this.editor = window.UE.getEditor("editor", this.config);
    this.editor.addListener("ready", () => {
      this.editor.setContent(this.value);
    });
  },
  methods: {
    getUEContent() {
      return this.editor.getContent();
    }
  },
  destroyed() {
    this.editor.destroy();
  }
};
</script>

<style lang='scss' scoped>
</style>

　　《3》其他页面使用

<template>
  <div>
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
    <el-button @click="returnContent">显示编辑器内容</el-button>
    <div>{{dat.content}}</div>
  </div>
</template>
<script>
import Uediter from "@/components/ueditor";
export default {
  data() {
    return {
      dat: {
        content: ""
      },
      ueditor: {
        value: "欢迎观看",
        config: {
          initialFrameWidth: 800,
          initialFrameHeight: 320
        }
      }
    };
  },
  methods: {
    returnContent() {
      this.dat.content = this.$refs.ue.getUEContent();
    }
  },
  components: {
    Uediter
  }
};
</script>

通过以上几个步骤即可完成：