Chrome禁止flash，百度编辑器ueditor复制粘贴word文章，图片转存无法使用
背景：
公司项目需求，在后台添加文章时需要大段大段从word复制带图片的文章，使用chrome等现代浏览器时flash被禁用，导致编辑器的图片转存功能无法使用。
一.编辑器配置好之后，发现粘贴word文章，图片是空白的
参考了
https://blog.csdn.net/lddtime/article/details/79272693
————————————————
原来，在默认情况下 ueditor 开启了 XSS 过滤（过滤、输入过滤、输出过滤都有相应的配置开关），任何不在 whitList 白名单上的标签及属性都会在转换时丢失。
这就直接导致了一些需要使用特殊标签或属性的功能直接失效，比如插入音乐、插入锚点、图片转存等。
最直接的解决办法就是关闭 XSS 过滤，可以注释掉上述配置或将上述三项设为 false，另一种方案就是将需要的标签及属性添加到白名单。
插入锚点需要给 a 标签添加 name 属性，给 img 标签添加 anchorname 属性
图片转存需要给 img 标签添加 word_img、style 属性
在配置文件 ueditor.config.js 的最下方找到img配置，加上属性
// xss 过滤是否开启,inserthtml等操作 ,xssFilterRules: true //input xss过滤 ,inputXssFilter: true //output xss过滤 ,outputXssFilter: true // xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js ,whitList: { a: ['target', 'href', 'title', 'class', 'style'], abbr: ['title', 'class', 'style'], // ... 部分省略 i: ['class', 'style'], img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex', 'word_img', 'style'], ins: ['datetime'], // ... 部分省略 video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'] }
二、虽然显示了对应的图片转存提示图片和转存按钮，但是弹窗打开提示是 FLASH初始化失败，请检查FLASH插件是否正确安装！网上找了一下有一款WordPaster插件可以解决，但需要安装，感觉不优雅；
编辑器自带有图片上传的功能，应该可以挪用过来。思路是在可以使用flash的浏览器用flash做图片转存，不支持flash用H5上传的方式。
1.图片转存弹窗的页面引入上传对应的样式和文件脚本，根据弹窗修改一下样式；在语言包文件拷贝对应的语言参数
2.相关核心代码如下
wordimage.html弹窗页面，修改：引入上传对应的样式和文件脚本；上传需要的HTML结构；样式需要自己改一下哦
// ... 部分省略 <script type="text/javascript" src="../internal.js"></script> <!-- jquery --> <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script> <!-- webuploader --> <script src="../../third-party/webuploader/webuploader.min.js"></script> <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css"> <!-- attachment dialog --> <link rel="stylesheet" href="attachment.css" type="text/css" /> <style type="text/css"> // ... 部分省略 <div id="flashContainer"></div> <!-- 上传图片 --> <div id="uploadH5" class="panel"> <div id="queueList" class="queueList"> <div class="statusBar element-invisible"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div><div class="info"></div> <div class="btns"> <div id="filePickerBtn"></div> <div class="uploadBtn"><var id="lang_start_upload"></var></div> </div> </div> <div id="dndArea" class="placeholder"> <div class="filePickerContainer"> <div id="filePickerReady"></div> </div> </div> <ul class="filelist element-invisible"> <li id="filePickerBlock" class="filePickerBlock"></li> </ul> </div> </div> <div> <div id="upload" style="display: none" ><img id="uploadBtn"></div> // ... 部分省略 <script type="text/javascript" src="tangram.js"></script> <script type="text/javascript" src="wordimage.js"></script> <script type="text/javascript" src="attachment.js"></script> <script type="text/javascript"> // ... 部分省略
引入上传文件的attachment.js，修改：初始化；待上传文件计数；上传成功的文件列表
window.onload = function () { /*initTabs(); initButtons();*/ uploadFile = uploadFile || new UploadFile('queueList'); }; // ... 部分省略 uploader.on('all', function (type, files) { selectedImageCount = uploadFile.getQueueCount(); switch (type) { // ... 部分省略 uploader.on('uploadSuccess', function (file, ret) { var $file = $('#' + file.id); try { var responseText = (ret._raw || ret), json = utils.str2json(responseText); if (json.state == 'SUCCESS') { _this.fileList.push(json); imageUrls.push(json); $file.append('<span class="success"></span>'); } else { $file.find('.error').text(json.state).show(); } } catch (e) { $file.find('.error').text(lang.errorServerUpload).show(); } });
wordimage.js，修改：H5上传，计数逻辑还有文件没上传时提示；根据flash禁用时展示H5上传；H5复制
// ... 部分省略 dialog.onok = function() { if (selectedImageCount) { $('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, selectedImageCount) + '</span>'); return false; } if (!imageUrls.length) return; var urlPrefix = editor.getOpt('imageUrlPrefix'), // ... 部分省略 flashObj = new baidu.flash.imageUploader(option); flashContainer = $G(opt.container); if (!baidu.swf.version) { $(flashContainer).html($("#uploadH5").addClass("focus")) } // ... 部分省略 if (clipboard && clipboard.flashInit) { clearInterval(clipinterval); clipboard.setHandCursor(true); clipboard.setContentFuncName("getPasteData"); //clipboard.setMEFuncName("mouseEventHandler"); }else{ var btn = document.getElementById(id); btn.onclick=function(){ var Url2 = document.getElementById(dataFrom); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 getPasteData(dataFrom); } }
总结：图片无法转存时，先看看 XSS 过滤是否开启，需要增加属性白名单；chrome禁用flash，可以使用自带的H5上传