天天看点
返回

wangEditor3 - v3.1.1版本 环境搭建-本地图片、本地视频上传功能实现

前文介绍 - 纲要

写这篇文章主要是因为最近项目所需，涉及到使用富文本编辑器生成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

由于项目原因，后台源码就不太方便拿出来了，故做如下点拨：
  1. 要实现图片上传功能，结合上文前端代码，进行图片路径配置，后台源码参考博文②，即可实现本地图片上传功能，因为官方有对本地图片的函数配置，所以前台直接调用即可。
官网相关文档：https://www.kancloud.cn/wangfupeng/wangeditor3/335782
  1. 要实现视频上传功能，结合上文前端代码，同时修改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组件的数据对接，有机会再来写~

技术分享 wangEditor3 wangEditor wangEditor3本地视频上传 wangEditor3本地图片上传
上一篇: php显示本地上传图片,js如何获取本地图片显示到浏览器并上传至服务器
下一篇: android上传本地图片到服务器,Android 图片上传 服务器端（一）

继续阅读