Vue集成Ueditor

前言

使用vue-cli3.0+element-ui+webpack作项目时,遇到了一个需求:文章管理中添加富文本编辑器(暂未添加上传图片功能),在百度上查看到好几个富文本编辑器,最终选择了百度的Ueditor,基本能知足全部需求。通过多番采坑以后，已实现相关功能,特此作一个记录。

1、下载Ueditor相关静态文件存放位置

首先去Ueditor官网下载相关资源(本文下载的1.4.3.3Jsp版本):

这里主要针对 vue-cli2与 vue-cli3进行区分。

vue-cli2

vue-cli2 版本中会生成一个static文件夹,用于放置静态资源,将下载的压缩包解压后放入static文件夹中:

vue-cli3

vue-cli3 在项目初始化时会生成一个public文件夹(public文件夹使用场景,public文件夹中的文件不会被webpack打包编译,只是简单的复制到打包后的dist文件夹中)。将下载的压缩包解压并重命名UE放入public文件夹中:

2、引入vue-ueditor-wrap后的相关配置

先安装vue-ueditor-wrap,而后在相关组件中引入vue-ueditor-wrap

npm i vue-ueditor-wrap -D
复制代码

在相关组件中注册并引入:

重点主要在myconfig配置参数上(详细配置参数见UE/ueditor.config.js)，在vue-cli2与vue-cli3上略显不一样。

vue-cli2

项目使用vue-cli2进行搭建而且将UE文件夹复制到了static文件夹中(如第一点所示),UEDITOR_HOME_URL配置为:

同时修改配置文件 ueditor.config.js中的UEDITOR_HOME_URL为 '/UE/'

vue-cli3

使用vue-cli3的UEDITOR_HOME_URL配置为:

同时修改配置文件 ueditor.config.js中的 UEDITOR_HOME_URL为 '/static/UE/'

上述步骤无误的话,最终显示结果应为:

3、修改富文本内容长度计算方式

该Ueditor中的内容长度(在这里仅以vue双向绑定为例)都是按照1个字符长度进行计算的,如插入一个表情显示长度为1:

实际上应该为带标签的字节长度,这里须要修改 ueditor.all.js或者 ueditor.all.min.js的源码。

修改ueditor.all.js的方式

在ueditor.all.js文件中全局查找getContentLength:

将高亮部分注释掉,而后将该文件压缩混淆后替换 ueditor.all.min.js文件便可

修改ueditor.all.min.js的方式

该方式比较简单粗暴,直接在ueditor.all.min.js中全局搜索getContentLength并删除高亮部分:

修改为功后的效果为:

4、其余问题

如在配置中出现下图相似问题：

请仔细检查配置参数 UEDITOR_HOME_URL路径是否正确。仔细检查！仔细检查！仔细检查！重要的事情说三遍~

最后

但愿本文能帮助到有须要的你~

相关参考资料:
vue-ueditor-wrap