vue前言
最近项目需要使用到富文本编辑器，因为项目关系需要使用到vue-ueditor-wrap富文本编辑器。经过了几小时的研究终于成功集成了。
1、install
vue2
# vue-ueditor-wrap v2 仅支持 Vue 2npm i vue-ueditor-wrap@2.x# 或者yarn add vue-ueditor-wrap@2.x
vue3
# vue-ueditor-wrap v3 仅支持 Vue 3npm i vue-ueditor-wrap@3.x -S# oryarn add vue-ueditor-wrap@3.x
2、需要安装对应的版本进行下载，前端无所谓，但是需要对应后端的版本进行下载
GitHub - haochuan9421/vue-ueditor-wrap at 2.x
3、下载完成之后会得到一个压缩包，解压压缩包之后把里面的内容放入static目录下（vue3是public）,也可以直接在git克隆demo下来更改，不过这个文件一般都不需要动。
4、使用富文本编辑器
（1）首先需要导入组件、样式等等
import VueUeditorWrap from 'vue-ueditor-wrap'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/themes/default/css/ueditor.css'
（2）声明组件
components: {VueUeditorWrap},
(3) v-model绑定数据
// 3、v-model绑定数据msg: '<h2><img src="/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',// 4、根据项目需求自行配置,具体配置参见ueditor.config.js源码或 /ueditor/#start-configeditorConfig: {// 初始容器高度initialFrameHeight: 240,// 初始容器宽度initialFrameWidth: '100%',// 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faqUEDITOR_HOME_URL: '/UEditor/',// 服务端接口serverUrl: ''}
（4）声明调用
<vue-ueditor-wrap v-model="msg" :config="editorConfig"></vue-ueditor-wrap>
然后就可以进行使用啦
注意事项
可能会报以下错误，这个就是路径的问题 需要根据不同的项目修改不同的路径
比如vue2就需要在static下配置，然后使用 以下进行获取
UEDITOR_HOME_URL: '/UEditor/',
而vue3项目需要在public目录下放置（第3步），并进行调用
总结
vue-ueditor-wrap使用一共3步。1 2下载 3配置 4使用，需要注意的就是在配置可能会出现的路径问题还有vue版本不同路径问题，其他都是小问题
