vue-cli 使用百度富文本编辑器插件【Editor】

简介：因为在项目中需要使用到普通文章编辑的功能，要求选择编辑器的时候尽量偏大众一点，偏操作性强一点的编辑器。查阅了很多的资料，最后选择了百度富文本编辑器，虽然百度的编辑器已经从16年开始没有再升级和维护，但是富文本社区还是有很多开发人员自主的进行各自版本的升级和演变。

说明：Editor编辑器与vue连用的例子在网上并不少，但是很多都有各种各样的问题。后来看到一个大佬写的集成插件，将 Editor编写为了一个适用于vue数据双向绑定的插件。

以下是本人对这个插件的总结说明：亲测vue-cli 2.x 使用成功；vue-cli 3.x 使用失败，具体原因是因为public的目录在项目中取不到资源（有可能与本地开发环境地址和线上生产环境地址的配置有关系，本人比较菜，没弄懂cli3.x里面的这个怎么配置）

1.插件安装

插件:vue-ueditor-wrap

npm：npm i vue-ueditor-wrap

yarn:yarn add vue-ueditor-wrap

github:https://github.com/HaoChuan9421/vue-ueditor-wrap.git

2.下载editor资源

下载最新编译的 UEditor。官网目前最新的版本是1.4.3.3，存在诸多 BUG，例如 Issue1，且官方不再积极维护。为了世界的和平，针对一些常见 BUG，我进行了修复，并把编译好的文件放在了本仓库的 assets/downloads 目录下，你可以放心下载，当然你也可以自己 clone 官方源码并编译。
vue-cli 使用百度富文本编辑器插件【Editor】
将下载的压缩包解压并重命名为 UEditor（只需要选择一个你需要的版本,比如 utf8-php）,放入你项目的 static 目录下。

3.引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
// 或者
const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS

4.注册组件

components: {
  VueUeditorWrap
}
// 或者在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

5.实现双向绑定数据

<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>

data () {
  return {
    msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>'
  }
}

至此你已经可以在页面中看到一个初始化之后的 UEditor 了，并且它已经成功和数据绑定了！

6.根据项目需求修改配置，完整配置选项

<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>

data () {
  return {
    msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
    myConfig: {
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 240,
      // 初始容器宽度
      initialFrameWidth: '100%',
      // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      serverUrl: 'http://35.201.165.105:8000/controller.php',
      // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
      UEDITOR_HOME_URL: '/static/UEditor/'
    }
  }
}

7.修改图片上传功能

思路：在编辑器挂载的时候，新增一个按钮在最开始的位置，用新增加的按钮来继续写一个上传操作，最终达到替换编辑器自带的上传按钮的操作

   <vue-ueditor-wrap v-model="content" :config="myConfig" @beforeInit="addCustomButtom"></vue-ueditor-wrap>

   addCustomButtom(editorId) {
        let that = this
        // 1. 自定义按钮
        window.UE.registerUI('test-button' + editorId, function (editor, uiName) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: function () {
              editor.execCommand(
              )
            }
          })
          // 创建一个 button
          var btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: '图片上传',
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules: "background-image: url('/static/image/upload.png') !important;background-size: cover;",
            // 点击时执行的命令
            onclick: function () {
              // 这里可以不用执行命令，做你自己的操作也可
              that.dialogVisible = true
            }
          })
          // 当点到编辑内容上时，按钮要做的状态反射
          editor.addListener('selectionchange', function () {

            var state = editor.queryCommandState(uiName)
            if (state === -1) {
              btn.setDisabled(true)
              btn.setChecked(false)
            } else {
              btn.setDisabled(false)
              btn.setChecked(state)
            }
          })
          // 因为你是添加 button，所以需要返回这个 button
          return btn
        }, 0 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)
      }

vue-cli 使用百度富文本编辑器插件【Editor】
总结：这次使用本插件过程全部记录下来了，在使用的过程遇到了几个问题，发了几封邮件给插件的开发者：郑昊川，感谢郑昊川大佬耐心的讲解和回复。如有同学在使用此插件遇到问题之后，推荐大家前往：https://github.com/HaoChuan9421/vue-ueditor-wrap 查阅详细的资料，或者前往郑昊川大佬的个人主页询问：https://github.com/HaoChuan9421

秒客网

vue-cli 使用百度富文本编辑器插件【Editor】