Chrome prohibit flash, Baidu Editor ueditor copy and paste word articles, pictures can not use the dump

background:

The company projects demand, when you add in the background article requires large chunks from the word copy of the article with pictures, flash is disabled when using a modern browser such as chrome, lead editor picture dump function can not be used.

A. After the editor configured found pasted word article, the picture is blank

Reference
https://blog.csdn.net/lddtime/article/details/79272693

————————————————

Original, default ueditor turned XSS filtering (filtering, enter the filter, the filter output has a corresponding switch configuration), and the label on any properties will not be lost when the whitelist whitList conversion.

This led directly to some of the need to use special tags or attributes direct function failure, such as inserting music, insert anchor, pictures and other dump.

The most direct solution is to close the XSS filter , you can comment out the above configuration or the above-mentioned three set to false, another solution is to add the required tags and attributes to the white list .

Inserting the anchor need to add a tag attribute name, attribute anchorname added to the img tag
image needs to be added to the rollover img tag word_img , style attributes

In the configuration file  ueditor.config.js find img configuration of the bottom, plus property

// XSS filter is turned on, inserthtml other operations 
, xssFilterRules: to true 
// filter XSS the INPUT 
, inputXssFilter: to true 
// the Output XSS filter 
, outputXssFilter: to true 
// XSS Filter White List List Source: https://raw.githubusercontent.com /leizongmin/js-xss/master/lib/default.js 
, whitList: {
    a:      ['target', 'href', 'title', 'class', 'style'],
    abbr: [ 'title', 'class', 'style' ],
     // ... partially omitted 
    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']
}

Second, although the display corresponding picture dump dump prompts pictures and buttons, but tips are pop open FLASH initialization fails, check FLASH plug-in is installed correctly! Internet to find a moment there is a WordPaster plug-ins can be resolved, but you need to install, do not feel the elegance;

Editor comes with picture upload function, you should be diverted over. The idea is to make the picture dump in flash can use the browser with flash, flash mode is not supported by H5 upload.

1. Picture dump pop page introduction to upload the corresponding style and script files, modify styles as pop; the language pack file to copy the corresponding language parameters

2. related core code is as follows

wordimage.html pop pages, change: the introduction of the corresponding uploaded file script and style; need to upload an HTML structure; change it needs its own style oh

// ... 部分省略
    <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">
// ... omitted part
        <div id="flashContainer"></div>
        <-! Upload pictures ->
        <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>
// ... omitted part
    <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">
// ... omitted part

 

Introduction to upload files attachment.js, modified: initialization; to be uploaded files count; a list of files uploaded successfully

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, modified: H5 uploaded, the count prompted logic also did not file upload; upload according to H5 showing when flash is disabled; H5 copy

// ... partially omitted 
    dialog.onok = function () {
         IF (selectedImageCount) {
            $ ( '. Info', '#queueList') html (. '<Span style = "color: red;">' + 'there are two not uploaded files' .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"))
    }
// ... partially omitted 
        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 (); // Select the object
                document.execCommand ( "Copy"); // Copy command execution browser
                getPasteData(dataFrom);
            }
        }

 

Summary: When images do not dump, take a look XSS filter is turned on, the need to increase property whitelist; chrome disable the flash, you can use the built-H5 upload