前言：
最近在处理公司的旧后台浏览器兼容问题，要求更换ewebeditor 编辑器，更换为ueditor 编辑器，并且要求 IE9/IE8/IE10/IE11/Micro Edge/Google/360 编辑器各项兼容，听说百度的编辑器兼容至IE6，以为简单的换个编辑器的我，在上面折腾了不少时间，本文针对具体问题进行处理，可能读者遇不到我这样的问题，事前说明：仅供参考、仅供参考、仅供参考
问题：
- 百度编辑器粘贴图片的时候，会出现暴露内网IP的隐患 - IE问题
- 百度编辑器
Ctril + v粘贴图片功能在IE上面不触发任何效果的问题 - 特殊符号传输后台的转义问题，以及将数据库的html读取之后，由于双引号导致的截取页面报错问题
- 针对
iframe这种嵌套框架，在保存的之后，拿不到编辑器内容的兼容处理方式
百度编辑器粘贴图片的时候，会出现暴露内网IP的隐患 - IE问题
问题复现
使用粘贴图片就会出现如下的问题，在查看源代码的时候，出现了如图所示的暴露源代码的问题，出现问题原因不明:
网络异常，图片无法展示
|
解决办法：
- 非常简单，只需要关闭
查看源代码的按钮就行，完美解决 - 如果一定要保留，在不知道如何处理的情况下，并且急需交差的时候，可以这么干（当时情况是第二天就得交差，由于一直找不到问题点，加班到晚上10想出来的办法）
障眼法：
先直接上代码：
// 点击源代码按钮对于编辑器的内容进行敏感href信息处理 2019.9.24 $('body').delegate(".edui-button-wrap","click",function(){ var editTxt = $('.edui-editor-iframeholder').find('textarea') if(editTxt.length){ var content = UE.getEditor('ueditor').getContent(); var aE = $('<div></div>'); aE.html(content) // alert(aE) aE.find('p.filedata').each(function(){ var newA = $(this).find('a') // alert(newA.attr('href')) if(newA.attr('href').indexOf("http://")>=0 || newA.attr('href').indexOf("https://")>=0){ var arr = newA.attr('href').split('/') var newTxt = '' for(var i=3; i<arr.length;i++){ newTxt +='/'+arr[i] } newA.attr('href',newTxt) } }) // alert(content); // 获取转义之后的字符 var formatTxt = toTxt(aE.html()); // formatTxt = appendBrToPAlfter(formatTxt); editTxt.html(formatTxt); } }); /*正则表达式 替换括号,尖括号等*/ function toTxt(str) { var RexStr = /\<|\>|\"|\'|\&/g str = str.replace(RexStr, function(MatchStr) { switch (MatchStr) { case "<": return "<"; break; case ">": return ">"; break; case "\"": return """; break; case "'": return "'"; break; case "&": return "&"; break; default: break; } }) return str; } 复制代码
- 绑定一个失去焦点的事件，在读取源代码的时候，对于内容进行截断
- 重新为href 赋值，保证连接无内网地址
- 去除掉内容里面的特殊标签，
- 重新为富文本框赋值
总结：
- 比较搞笑的解决方式，但是当领导掐着你脖子的时候，解决问题永远是第一位。至少这种方式上线之后，没有反馈出现过问题，各个版本的浏览器都是兼容的，算是逃过一劫
- 个人建议富文本编辑器有空多去玩玩查看源代码的功能，有时候编辑器的默认设置可能会坑了你，比如百度编辑器默认会加上 p 标签。。。。
特殊符号传输后台的转义问题，以及读取数据的问题
&
针对 iframe这种嵌套框架，在保存的之后，拿不到编辑器内容的兼容处理方式
问题复现：
由于旧后台是使用iframe进行拼接旧后台系统，在保存的时候，表单无法拿到富文本编辑框的内容，并且在读取的时候，会导致一些样式代码被截断导致内容显示不全的问题。
我们都知道富文本在数据库存储的一般都是html原文，一般的系统都会对一些 < > \ $ % 这种字符进行转义处理或者拦截。所以我们直接用js传原生文本肯定是不行的，需要进过如下的处理：
存储的时候：
- 转移特殊符号，替换原文本
- 拦截器拦截检测是否有特殊文本，进行二次转义
- 存储之前，将转义字符变为原始 < > 等标签，替换内容
- 将富文本存储到数据库，完成
读取的时候：
- 读取数据库的内容
- 回显内容到富文本编辑器（这一步其实会遇到非常多的奇怪问题，请看下文）
至于保存的时候，这里的实际情况是，旧版本的ewebeditor，在父iframe也就是表单的父页面使用了一个textarea 标签来保存具体的内容，导致即使我在iframe操作之后，依然会出现问题。
网络异常，图片无法展示
|
解决办法：
也是直接上代码：
var ue = UE.getEditor('ueditor'); //初始化内容 window.onload = function(){ setTimeout(function(){ ue.setContent($('#'+QueryStringByName('id'), parent.document).val()) },500) } // 绑定失去焦点事件 ue.addListener('blur',function(editor){ var content = UE.getEditor('ueditor').getContent(); var aE = $('<div></div>'); aE.html(content) aE.find('p.filedata').each(function(){ var newA = $(this).find('a') if(newA.attr('href').indexOf("http://")>=0 || newA.attr('href').indexOf("https://")>=0){ var arr = newA.attr('href').split('/') var newTxt = '' for(var i=3; i<arr.length;i++){ newTxt +='/'+arr[i] } newA.attr('href',newTxt) } }) content = toTxt(aE.html()); //alert(content); $('#'+QueryStringByName('id'), parent.document).html(content) }); //获取search参数 function QueryStringByName(name){ var result=window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i")); if(result==null || result.length<0){ return ""; } return result[1]; } 复制代码
- 在初始化的时候，跑去父窗口拿到数据的文本内容，做了一点点的延时加载。
- 使用
blur事件做textarea和 富文本编辑器的双向同步 - 同样需要处理内网地址暴露的问题，需要截取内网地址
- 对于特殊标签转义
总结：
- 富文本暂存区域，最好选隐藏域的
textarea，使用value 值会出现双引号截取的问题 - 小心转义带来的各种问题，一定要记得何时数据会被转义，同时什么阶段的数据内容是什么形式
- 关注富文本编辑器本身干的一些"
杂活"
