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