關於ckeditor粘貼圖片自動上傳

在以前在工做中遇到在富文本編輯器中粘貼圖片不能展現的問題，因而各類網上扒拉，終於找到解決方案，在這裏感謝一下知乎中衆大神以及TheViper。

經過知乎提供的思路找到粘貼的原理，經過TheViper找到粘貼圖片的方法。

其原理爲一下步驟：

1. 監聽粘貼事件；【用於插入圖片】
2. 獲取光標位置；【記錄圖片插入位置】
3. 獲取剪切板內容；【主要是獲取文件】
4. 上傳剪切板圖片；
5. 在指定光標位置插入圖片。

如下是代碼部分：

1.獲取光標代碼部分，大部分都是直接利用TheViper的代碼，只是作了簡單的修改，在獲取光標的位置添加了插件子集document對象，由於直接使用document對象獲取不到光標位置

var isSupportRange = typeof document.createRange == 'function';
    var currentRange,
        _parentElement;
    // 獲取當前光標多在位置
    function getCurrentRange(target) {
        var selection,
            range;

        if (isSupportRange) {
            selection = target.getSelection();
            if (selection.getRangeAt && selection.rangeCount) {
                range = selection.getRangeAt(0);
                _parentElement = range.commonAncestorContainer;
            }
        } else {
            range = target.selection.createRange();
            _parentElement = range.parentElement();
        }
        return range;
    }

    function saveSelection(target) {
        currentRange = getCurrentRange(target);
    }

    function _restoreSelection() {
        if (!currentRange) {
            return;
        }

        var selection,
            range;

        if (isSupportRange) {
            selection = document.getSelection();
            selection.removeAllRanges();
            selection.addRange(currentRange);
        } else {
            range = document.selection.createRange();
            range.setEndPoint('EndToEnd', currentRange);
            if (currentRange.text.length === 0) {
                range.collapse(false);
            } else {
                range.setEndPoint('StartToStart', currentRange);
            }
            range.select();
        }
    }

    function insertImage(html,target) {
        if (document.selection)
            currentRange.pasteHTML(html);
        else
            target.execCommand("insertImage", false, html);
        saveSelection();
    }

2.監聽粘貼事件、獲取上傳圖片、上傳至服務器並添加至編輯器

CKEDITOR.instances['document-info'].on('instanceReady', function(e) {
    this.document.on('paste', function(event) {
        var target = event.sender.$;
        saveSelection(target);
        var items = event.data.$.clipboardData.items;
        if (!items) {
            return;
        }
        for (var i = items.length - 1; i >= 0; i--) {
            if (items[i].kind == 'file' && items[i].type.indexOf('image/') !== -1) {
                var file = items[i].getAsFile();
                if (file) {
                    if (file.size === 0) {
                        return;
                    }

                    var formData = new FormData();
                    formData.append("file", file);

                    $.ajax({
                        method: 'POST',
                        url: url,
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            var _img_html = response.url;
                            insertImage(_img_html,target);
                        }
                    });
                }
            }
        }
    });
});

數據提交部分須要注意

processData: false, contentType: false,這兩項須要設置，不然文件不能正常上傳該問題沒有完美的解決，存在如下疑問，若有想法，請告知。1.從word中複製圖片爲rtf格式，不能被保存，並解析圖片，有待解決；2.只能單個文件複製，多個文件複製存在問題在接觸該問題前期，錯誤的解決思路：1.經過input控件上傳，因瀏覽器安全設置緣由，不容許input:file賦值；2.使用convas將圖片轉換爲base64存儲，該處也有問題，傳喚base64時，存在跨域問題。