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

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 官方源码并编译。建议下载地址：https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads

将下载的压缩包解压并重命名为 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