在Vue2.x项目中使用百度富文本编辑器UEditor

记录一下前段时间在项目中遇到一个使用富文本的需求，对于富文本功能要求较高，所以后来选择了百度的UEditor。由于这是一个比较老的编辑器了，所有网上结合Vue的文章较少。从github上可以看见最后一次的提交是在19年。这里附上github地址以及官方文档地址，便于后期查阅。

我这里拿vue-cli4来举例：

1. 把从github下载的UEditor项目直接放到我们自己项目中的public文件夹中。

2. 安装VueUeditorWrap组件

关于该组件的一些信息可以去这里查看

npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap

3. 在项目中引入

// main.js
import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('VueUeditorWrap',VueUeditorWrap)
// 也可以直接在单文件.vue中引入使用(同时记得在components中注册一下)

4. 使用

<VueUeditorWrap v-model="ueContent" :config="myConfig" />
// config即是编辑器的配置选项，更多的配置项可以去官方的文档进行查阅。

myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: true,
        // 初始容器高度
        initialFrameHeight: 600,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // UEditor 资源文件的存放路径，
        UEDITOR_HOME_URL:
          process.env.NODE_ENV == "production" ? "/material/trade/ue/" : "/ue/",
        imagePopup: false,
        imageScaleEnabled: false,
        elementPathEnabled: false,
        autoFloatEnabled: false,
        allowDivTransToP: false,
        zIndex: 1,
        // 允许的最大字符数
        maximumWords:100000
      },
      

接下来就是配置好了的样子