关于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时，存在跨域问题。

转载于:https://www.cnblogs.com/happen-/p/8350557.html