正文

关于ckeditor粘贴图片自动上传

IP云
IP云V管理员/6 阅读
08/23
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

其原理为一下步骤：

  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);
                        }
                    });
                }
            }
        }
    });
});

数据提交部分需要注意

DEMO下载地址：https://dwz.cn/ORcEz9fz