前言

最近项目中有集成富文本编辑的需求，在市面上搜索了很多插件，发现还是百度的UEditor比较适合，功能强大，兼容性好。对于jQuery架构的前端项目，引入UEditor并不是什么难事，但是在vue中确实需要稍作改变

路径配置

下载UEditor，我下载的jsp版本的
将下载的文件放入vue项目中
打开ueditor.config.js
设置window.UEDITOR_HOME_URL为项目绝对路径地址

  // 我将下载下来的UEditor文件放在了根路径下的"static/js/ueditor"文件夹中
  window.UEDITOR_HOME_URL = "/static/js/ueditor/"

找到window.UEDITOR_CONFIG这个对象，注释其serverUrl字段（如果不注释会报上传文件地址错误的问题）
打开vue的入口模板html文件，设置cdn引用

  <script type="text/javascript" src="/static/js/ueditor/ueditor.config.js"></script>
  <script type="text/javascript" src="/static/js/ueditor/ueditor.all.min.js"></script>
  <script type="text/javascript" src="/static/js/ueditor/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript" src="/static/js/ueditor/ueditor.parse.min.js"></script>

至此，前期准备工作已经完成

实际使用

<template>
    <script id="editor" type="text/plain"></script>
</template>

<script>

export default {
  props: {
    defaultMsg: {
      type: String
    },
    config: {
      type: Object
    }
  },

  data () {
    return {
      editor: null
    }
  },

  mounted () {
    const _this = this
    this.editor = window.UE.getEditor('editor', this.config) // 初始化UE
    this.editor.addListener('ready', function () {
      _this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后，放入内容
    })
  },

  destroyed () {
    this.editor.destroy()
  }
}
</script>