在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题，于是各种网上扒拉，终于找到解决方案，在这里感谢一下以及。

通过知乎提供的思路找到粘贴的原理，通过找到粘贴图片的方法。

其原理为一下步骤：

1. 监听粘贴事件；【用于插入图片】
2. 获取光标位置；【记录图片插入位置】
3. 获取剪切板内容；【主要是获取文件】
4. 上传剪切板图片；
5. 在指定光标位置插入图片。

以下是代码部分：

1.获取光标代码部分，大部分都是直接利用的代码，只是做了简单的修改，在获取光标的位置添加了插件子集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时，存在跨域问题。