wangEditor在IE中截图上传问题（一）

最近使用wangEditor富文本在IE中截图上传问题遇到了瓶颈，当时选用wangEditor富文本编辑器时，并没有想到上传图片时，浏览器兼容的问题，目前从wangEditor版本1到3，从2开始说支持chrome、firefox、opera、IE11的粘贴截图上传，但是我引用后，IE并没有可以支持截图功能，为了解决这个问题在网上花了大量的时间来搜集资料，但也没有找到好的解决办法。

瞬间感觉头大！！！

既然插件并没有实现这个效果，那么我们只好自己通过其他方法将截图数据传给后台啦！
首先我用chrome截图上传，发现chrome利用clipboardData

chrome：

ClipboardEvent 接口描述了与修改剪切板相关信息的事件，这些事件包括剪切cut , 复制copy 和粘贴paste 事件。

event有clipboardData属性，且clipboardData有item属性，clipboardData.item中的元素（对象）有type和kind属性；
无论在哪进行粘贴，均可触发paste事件；
在div（未特殊声明时，本文div均指设置了contenteditable属性的div）
里粘贴截图，不显示图片。img.src为base64编码字符串；在div里粘贴网页图片，直接显示图片，img.src为图片地址。

firefox：

event有clipboardData属性，clipboardData没有item属性；
只有在textarea里或者可编辑的div（里才粘贴才触发paste事件；
在div里粘贴截图，直接显示图片，img.src为base64编码字符串；
在div里粘贴网页图片，表现同chrome。

IE11:

event没有clipboardData属性；
只在可编辑的div中粘贴才触发paste事件；
在div里粘贴截图，直接显示图片，img.src为base64编码字符串；
在div里粘贴网页图片，表现同chrome。

chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回调函数里获取到剪贴板里图片的base64编码字符串（无论是截图粘贴的还是网页图片复制粘贴的），ie11，firefox没有这样的api
详细：https://www.jb51.net/article/80657.htm

第一个问题：
所以发现粘贴功能是对浏览器有兼容问题，我在修改的时候发现，在IE中截图上传偶尔是可以提交，有时候无法提交，总给我一种我修改成功的假象，经过多次测试发现，在IE中它是以base64形式存储的，而截图较小时，没有超过数据库字段长度，所以可以保存上传。
IE：

mysql：

第二个问题：
接下来的想法是把img src 下的base64转化成file然后在进行存储，所以要找到输出base64的地方。首先在发布中，找到了这里

editor.customConfig.onchange = function (html) {//可以看到截图的base64}

当我们继续要往下进行转化时，发现虽然这里可以看到截图的base64,而我们要根据字符串的长度判断截图是否是二进制时，这里的html是富文本框内信息所有数据，包括文字和若干图片我们无法准确判断，所以要找到只是粘贴的地方才能很好的确定。

第三个问题：
于是按着这个思路开始到wangEditor.js中寻找，首先我开始搜索“粘贴”从头开始查，遇到疑似的地方就输出查看一下（有些浪费时间，因为每次都要重新运行刷新截图）

// 粘贴过滤样式，默认开启pasteFilterStyle: true,// 粘贴内容时，忽略图片。默认关闭pasteIgnoreImg: false,// 对粘贴的文字进行自定义处理，返回处理后的结果。编辑器会将处理后的结果粘贴到编辑区域中。// IE 暂时不支持pasteTextHandle: function pasteTextHandle(content) {// content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回alert(content);return content;},

可以看到里面也标注了一些粘贴功能是对IE不支持的
里面细致的讲解了对粘贴文字，插入网路图片，插入表情的代码，但是就是没有查到我想要找的粘贴图片的地方。

 // 粘贴图片$textElem.on('paste', function (e) {if (UA.isIE()) {return;} else {e.preventDefault();}

找到这里你会发现，它判断如果是IE就返回，瞬间爆炸。输出e.preventDefault()

之后往下继续寻找，看到上传图片，粘贴图片，插入字样都会留意，最终发现在

 // 执行，使用节流if (onChangeTimeoutId) {clearTimeout(onChangeTimeoutId);}onChangeTimeoutId = setTimeout(function () {// 触发配置的 onchange 函数onchange(currentHtml);beforeChangeHtml = currentHtml;

此时的currentHtml就是我想要的值

接下啦我们就要开始进行截取src的值

var dataURI = $("p img").attr('src');

截取成功之后，我们要开始考虑把截取的字符串转换成流存储到数据库，之后我会在下一篇进行详解。

wangEditor在IE中截图上传问题（二）

wangEditor在IE中截图上传问题（一）相关推荐

JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
头像截图上传两种方式（SWFUpload、一个简单易用的flash插件）
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input ty ...
使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
java中uploadify_java 上传3（uploadify中文api）
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
php处理html5文件上传代码,HTML5中文件上传的代码
这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助.XHR2上传二进制文件 html代码: javascript代码:functi ...
Java中FTPClient上传中文目录、中文文件名乱码问题解决方法
Java中FTPClient上传中文目录.中文文件名乱码问题解决方法参考文章: (1)Java中FTPClient上传中文目录.中文文件名乱码问题解决方法 (2)https://www.cnblog ...
ASP.NET中文件上传下载方法集合
asp.net 2008-08-23 21:10:35 阅读0 评论0 字号:大中小订阅 ASP.NET中文件上传下载方法集合文件的上传下载是我们在实际项目开发过程中经常需要用到的技术,这里给 ...
mfc中ado上传image到sql数据库
mfc中ado上传image到sql server数据库一.关于mfc的使用就不在此献丑了,直接讲ado连接sql server数据库. 1.我采用的是连接方法是调用一个udl文件中的数据库配 ...
layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...

wangEditor在IE中截图上传问题（一）

wangEditor在IE中截图上传问题（一）相关推荐

最新文章

热门文章