背景：
公司项目需求，在后台添加文章时需要大段大段从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上传
原文地址：https://www.cnblogs.com/modestFrank/p/12048772.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。