Vue集成百度富文本编辑器UEditor

前言

最近公司的项目需要用的百度的富文本编辑器UEditor，就研究了一下Vue怎么集成UEditor，通过网上查找资料发现了两种实现方法
资料博客：伏特人族

实现

第一种：Github上网友提供的插件：vue-ueditor-wrap

这种方式是最简单的，有非常详细的文档，想使用的小伙伴可以自己去看看，我就不具体实现了
Github地址：https://github.com/HaoChuan9421/vue-ueditor-wrap

第二种：集成官方源码

官网地址：https://github.com/fex-team/ueditor
先从官网下载UEditor的jsp版本源码

但是发现直接下载jsp版本的入口已经不提供了，只有开发版的完整源码

因为vue集成需要源码的js文件，开发版显然没有直接提供，所有我们需要本地部署编译一下

下载压缩包，解压后以管理员的方式打开cmd进入当前目录

先安装grunt
官网地址：https://www.gruntjs.net/getting-started

 npm install -g grunt-cli

安装项目依赖的库

 npm install

执行 grunt 命令

 grunt default

完成，没有错误
然后我们可以看到编译后生成了一个dist文件夹

里面有一个utf8-php文件夹，这是php版本的源码，不过这个也可以用，拿到js源码之后就是vue集成了

将整个utf8-php文件夹复制到vue项目的static目录下，修改目录名称为ueditor

在main.js中引入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'

创建ueditor富文本组件，组件内容如下

<template>
  <div>
    <script :id="id" type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: 'ueditor',
  data() {
    return {
      editor: null
    }
  },
  props: {
    defaultMsg: {
      type: String
    },
    config: {
      type: Object
    },
    id: {
      type: String
    },
  },
  mounted() {
    const _this = this;
    this.editor = UE.getEditor(this.id, this.config); // 初始化UE
    this.editor.addListener("ready", function () {
      //延时添加, 防止页面加载富文本编辑器来不及赋值/或网络延时加载不上
      setTimeout(function () {
        _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
      }, 300)

    });
  },
  methods: {
    getUEContent() { // 获取内容方法
      return this.editor.getContent()
    },
    getUEContentTxt() { // 获取纯文本内容方法
      return this.editor.getContentTxt()
    }
  },
  destroyed() {
    this.editor.destroy();
  }
}
</script>

最后还需要修改一下ueditor.config.js，设置

 window.UEDITOR_HOME_URL = "/static/ueditor/";

即可正常使用UEditor了