前文介绍 - 纲要
写这篇文章主要是因为最近项目所需，涉及到使用富文本编辑器生成HTML文本，同时实现PC的解析HTML文本的编辑功能及微信小程序端的HTML的富文本解析，然后看到荼蘼2018 的博客说wangEditor很不错，介于百度的UEditor已经停止维护多年，且比较臃肿、麻烦，就直接上手了wangEditor。
荼蘼2018：几种知名开源富文本编辑器记录和对比（仅供参考）
https://www.cnblogs.com/yoga21/p/9215000.html
使用工具：（本文就着重讲wangEditor的本地图片、视频上传功能）
PC端：wangEditor - v3.1.1版本
微信小程序端：WxParse
用了才发现，富文本编辑器还是比较麻烦的，并不是所有内容都可能直接生成转译，还要涉及与后台数据交互，而恰巧wangEditor官网对这一块的描述比较少，所以就分享一下个人达成的一些解决方案（综合网络各个大神的分享点拨才实现~）
先走一波原作者的辛苦成果
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。官网：www.wangEditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor
正文 - 编辑器的创建（本地图片、视频上传功能）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<!-- 注意， 图片、视频等所有方法的原型都在里面配置，这里仅做调用配置-->
<!-- 注意， 我这里在原wangEditor.js基础上，根据项目重写了些方法-->
<script type="text/javascript" src="../js/wangEditorMore.js"></script>
<!--配置编辑器 配置本地图片上传 配置本地视频上传-->
<script type="text/javascript">
// 生成编辑器
var E = window.wangEditor
var editor = new E('#editor')
// 忽略粘贴内容中的图片 ： 建议加上，防止盗链产生资源跨域问题
editor.customConfig.pasteIgnoreImg = true;
//设置文件上传的参数名称
editor.customConfig.uploadFileName = 'uploadPic';
// 上传图片到服务器
editor.customConfig.uploadImgServer = 'http://.../uploadImage.do';
// 将图片大小限制为 3M 也可以后台做大小限制
// editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
//自定义上传图片事件editor.customConfig.pasteIgnoreImg = true;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
},
success: function (xhr, editor, result) {
console.log("上传成功");
},
fail: function (xhr, editor, result) {
console.log("上传失败,原因是" + result);
},
error: function (xhr, editor) {
console.log("上传出错");
},
timeout: function (xhr, editor) {
console.log("上传超时");
},
customInsert: function (insertImg, result, editor) {
// insertImg 是插入图片的函数，editor 是编辑器对象，
// result 是服务器端返回的结果必须是一个JSON格式字符串,多个图片地址组成的数组
for (var j = 0; j < result.data.length; j++) {
insertImg(result.data[j]);
}
}
};
// 上传视频到服务器
editor.customConfig.uploadVideoServer = 'uploadVideo'
//自定义上传视频事件
editor.customConfig.uploadVideoHooks = {
before: function (xhr, editor, files) {
},
success: function (xhr, editor, result) {
console.log("上传成功");
},
fail: function (xhr, editor, result) {
console.log("上传失败,原因是" + result);
},
error: function (xhr, editor) {
console.log("上传出错");
},
timeout: function (xhr, editor) {
console.log("上传超时");
},
customInsert: function (insertVideo, result, editor) {
// insertVideo 是插入图片的函数，editor 是编辑器对象，
// result 是服务器端返回的结果必须是一个JSON格式字符串
insertVideo(result.data);
}
};
// 自定义菜单配置
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'undo', // 撤销
'redo' // 重复
]
editor.create()
</script>
</body>
</html>
相关参考博文
①本地图片上传问题：
fly_鸡肉：https://blog.csdn.net/qq_37936542/article/details/81172364
······································································································
②本地图片后台java配置
weixin_38296857：https://bbs.csdn.net/topics/392328970
······································································································
③本地视频上传问题：
赖胖子的csdn：https://blog.csdn.net/I_am_Yong_Ge/article/details/100118109
·······································································································
④本地视频上传菜单原型方法**(特别注意文末作者的提醒，替换别放错了位置)**
前端小狮：https://blog.csdn.net/m0_37885651/article/details/83660206
由于项目原因，后台源码就不太方便拿出来了，故做如下点拨：
- 要实现图片上传功能，结合上文前端代码，进行图片路径配置，后台源码参考博文②，即可实现本地图片上传功能，因为官方有对本地图片的函数配置，所以前台直接调用即可。
官网相关文档：https://www.kancloud.cn/wangfupeng/wangeditor3/335782
- 要实现视频上传功能，结合上文前端代码，同时修改wangEditor.js的原型，js修改参考博文④，后台源码参考博文③，即可实现本地视频上传功能，因为官网没有相关的本地视频上传，所以才要自己改写。
特别注意，本地视频配置中，在wangEditorMore.js的4631行进行相关后台路径配置
// ------------------------------ 获取配置信息 ------------------------------
var editor = this.editor;
var config = editor.config;
//不需要带域名 ...替换成你的路径 上传地址
var uploadVideoServer = ".../uploadVideo.do";
var maxSize = 100 * 1024 * 1024; //100M
var maxSizeM = maxSize / 1000 / 1000;
var maxLength = 1;
var uploadFileName = "file";
var uploadVideoParams = config.uploadVideoParams || {};
var uploadVideoHeaders = {};
var hooks =config.uploadVideoHooks || {};
var timeout = 5 * 60 * 1000; //5 min
var withCredentials = config.withCredentials;
if (withCredentials == null) {
withCredentials = false;
}
个人做了些优化的wangEditor.js => wangEditorMore.js
- 实现wangEditor本地图片上传
- 实现wangEditor本地视频上传
- 部分显示样式bug的调整
wangEditorMore.js 下载地址：
https://download.csdn.net/download/qq_37592561/11983697
最后鸣谢wangeditor开发者及上文所提各位博主。
**
个人wx公众号：小帽集团
**
后续关于wangEditor及相关实现微信小程序的wxparse组件的数据对接，有机会再来写~