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上传