前言
使用vue-cli3.0+element-ui+webpack做项目时,遇到了一个需求:文章管理中添加富文本编辑器(暂未添加上传图片功能),在百度上查看到好几个富文本编辑器,最终选择了百度的Ueditor
,基本能满足所有需求。经过多番采坑之后,已实现相关功能,特此做一个记录。
一、下载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
文件夹中:
二、引入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/'
上述步骤无误的话,最终显示结果应为:
三、修改富文本内容长度计算方式
该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
并删除高亮部分:
四、其他问题
如在配置中出现下图类似问题:
请仔细检查配置参数UEDITOR_HOME_URL
路径是否正确。仔细检查!仔细检查!仔细检查!重要的事情说三遍~
最后
希望本文能帮助到有需要的你~
vue-ueditor-wrap