vue集成vue-ueditor-wrap富文本编辑器

vue前言

最近项目需要使用到富文本编辑器，因为项目关系需要使用到vue-ueditor-wrap富文本编辑器。经过了几小时的研究终于成功集成了。

1、install

vue2

# vue-ueditor-wrap v2 仅支持 Vue 2
npm i vue-ueditor-wrap@2.x
# 或者
yarn add vue-ueditor-wrap@2.x

vue3 

# vue-ueditor-wrap v3 仅支持 Vue 3
npm i vue-ueditor-wrap@3.x -S
# or
yarn 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="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
            // 4、根据项目需求自行配置,具体配置参见ueditor.config.js源码或 http://fex.baidu.com/ueditor/#start-config
            editorConfig: {
                // 初始容器高度
                initialFrameHeight: 240,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
                UEDITOR_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版本不同路径问题，其他都是小问题