Vue项目中使用UEditor富文本编辑器

1. 安装插件 vue-ueditor-wrap，命令如下：

npm i vue-ueditor-wrap -S

2. 在 github 中下载依赖文件，我下载的是 utf8-php.zip 版本。

3. 将下载的压缩包解压并重命名为 UEditor ,放入你项目的 static 目录下。

4. 引入 VueUeditorWrap 组件。这里我以全局引入为例：在 main.js 中放入如下代码：

import VueUeditorWrap from 'vue-ueditor-wrap'
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>'
  }
}

到此，简单的富文本编辑器已经实现了。更详细的教程请参考：https://blog.csdn.net/haochuan9421/article/details/81975966

效果图