一、下载

https://ueditor.baidu.com/website/download.html#ueditor

下载Jsp 版本 UTF-8版 

二、下载完成后将文件放入vue项目中的静态资源文件中

按照自己的实际路径修改ueditor.config.js中的window.UEDITOR_HOME_URL配置，如下图：

在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'

三、编辑器组件

<template>
  <div>
    <!--下面通过传递进来的id完成初始化-->
    <script :id="randomId" type="text/plain"></script>
  </div>
</template>

  <script>
export default {
  name: "UE",
  props: {
    value: {
      default: function() {
        return "";
      }
    },
    //配置可以传递进来
    config: Object
  },
  data() {
    return {
      //每个编辑器生成不同的id,以防止冲突
      randomId: "editor_" + Math.random() * 100000000000000000,
      //编辑器实例
      instance: null,
      ready: false
    };
  },
  watch: {
    value: function(val, oldVal) {
      if (val != null && this.ready) {
        this.instance = UE.getEditor(this.randomId, this.config);
        this.instance.setContent(val);
      }
    }
  },
  //此时--el挂载到实例上去了,可以初始化对应的编辑器了
  mounted() {
    this.initEditor();

  },

  beforeDestroy() {
    // 组件销毁的时候，要销毁 UEditor 实例
    if (this.instance !== null && this.instance.destroy) {
      this.instance.destroy();
    }
  },
  methods: {
    initEditor() {
      const _this = this;
      //dom元素已经挂载上去了
      this.$nextTick(() => {
        this.instance = UE.getEditor(this.randomId, this.config);
        // 绑定事件，当 UEditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
        this.instance.addListener("ready", () => {
          this.ready = true;
          this.$emit("ready", this.instance);
        });
      });
    },
    setText(con) {
      this.instance = UE.getEditor(this.randomId, this.config);
      this.instance.setContent(con);
    },
    getUEContent() {
      // 获取内容方法
      return this.instance.getContent();
    }
  }
};
</script>

<style scoped>
#edui1 {
  width: 100%;
}
</style>

四、调用组件

<template>
  <div class="components-container">
    <button @click="getUEContent()">获取内容</button>
    <button @click="setText()">设置内容</button>
    <div class="editor-container">
      <UE :value="defaultMsg" :config="config" ref="ue"></UE>
    </div>
  </div>
</template>
<style>

</style>
<script>
  import UE from '../../components/ue.vue';
  export default {
    components: {UE},
    data() {
      return {
        defaultMsg: '这里是UE测试',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 500
        }
      }
    },
    methods: {
      getUEContent() {
        let content = this.$refs.ue.getUEContent();
        console.log(content)
      },
      setText(){
        let content = this.$refs.ue.setText();
      }
    }
  };
</script>

最终效果如图：

五、配置

实例化后的初始编辑器,里面的功能有很多,其中有一部分可能是我们完全用不到的,百度提供了可以定制的功能

有两种方式

初始化时添加配置，如下

<script type="text/javascript">
    //实例化编辑器
    var ue = UE.getEditor('editor', {
    toolbars: [
        [
            'undo', //撤销
            'bold', //加粗
            'underline', //下划线
            'preview', //预览
            'horizontal', //分隔线
            'inserttitle', //插入标题
            'cleardoc', //清空文档
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            'simpleupload', //单图上传
            'insertimage', //多图上传
            'attachment', //附件
            'music', //音乐
            'inserttable', //插入表格
            'emotion', //表情
            'insertvideo', //视频
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对
            'justifyjustify', //两端对齐
            'forecolor', //字体颜色
            'fullscreen', //全屏
            'edittip ', //编辑提示
            'customstyle', //自定义标题
            'template', //模板
             ]
        ]
    });
</script>

想定制什么功能,只需要参照上面下载的编辑器demo内的ueditor.config.js文件中toolbars属性,将对应的字符串添加进去即可:

ueditor.config.js文件可以定制编辑器的很多功能,只需要将对应属性前面的'//'去掉,true为开启,false为关闭进行设置即可.比如:

实际应用时我们还有可能在一个域名下上传百度编辑器编辑的内容(例如:在www.52lnamp.com域名下上传了一张图片)，而需求不单单是要在这域名下展示,还需要可以在其它域名下展示,这时就会出现图片不存在的情况，

这是因为百度编辑器的配置文件中默认的上传路径是相对路径，也就是说上面上传的图片的地址是相对于当前的域名进行上传的,只有在你上传的域名下可以展示,其它域名是显示不出来的,

如果要在另外一个域名上展示的话只需要修改配置文件为绝对路径就可以了，打开上面下载的demo，找到php/config.json文件,打开后你会看到

其中imageUrlPrefix这个属性加上域名即可:"imageUrlPrefix": "http://www.xxx.com", /* 图片访问路径前缀 */

需要注意的是添加域名的时候必须带上http or https,只有这样写出来的才能正常显示,不加的话在你引用的时候会在前面重复加上一个域名,基本了解了这些足以应对日常的需求,有其它另类的需求可以参考百度编辑器文档

图片上配置参考如下

https://blog.csdn.net/weixin_42310713/article/details/100113018