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

其原理为一下步骤:

  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

关于ckeditor粘贴图片自动上传的更多相关文章

  1. ckeditor实现WORD粘贴图片自动上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  2. ckeditor实现WORD粘贴图片自动上传,jsp应用

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  3. Fckeditor实现WORD粘贴图片自动上传

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  4. CKeditor粘贴图片在IE下自动上传的研究

    我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...

  5. CKEditor本地图片自动上传插件

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

  6. CKEditor粘贴图片上传功能

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  7. ckeditor粘贴word图片且图片文件自动上传功能

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  8. ckeditor从word粘贴图片

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  9. ckeditor直接粘贴图片实现

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

随机推荐

  1. 使用 jenkins 为 nginx 增加上下文

    每次需要在Nginx增加上下文,都需要添加如下两段 ​ server.conf upstream serverdownloadPage { server 10.11.19.6:3023; } ​ ht ...

  2. 使用VGG16完成猫狗分类

    from keras.applications.vgg16 import VGG16 from keras.models import Sequential from keras.layers imp ...

  3. Trie树(代码),后缀树(代码)

    Trie树系列 Trie字典树 压缩的Trie 后缀树Suffix tree 后缀树--ukkonen算法 Trie是通过对字符串进行预先处理,达到加快搜索速度的算法.即把文本中的字符串转换为树结构, ...

  4. ChromePassword

    # -*- coding: utf-8 -*- 2# @Author : pwf 3 4# @Date : 2019/5/18 22:53 5# Software : PyCharm 6# versi ...

  5. CF892E Envy[最小生成树]

    题意:有一张 $n$ 个点$ m $条边的连通图.有$Q$ 次询问.每次询问给出 $k[i]$ 条边,问这些边能否同时出现在一棵最小生成树上.$n,m,Q,\sum k\le 500000$. 这题利 ...

  6. java8新特性学习:函数式接口

    本文概要 什么是函数式接口? 如何定义函数式接口? 常用的函数式接口 函数式接口语法注意事项 总结 1. 什么是函数式接口? 函数式接口其实本质上还是一个接口,但是它是一种特殊的接口:SAM类型的接口 ...

  7. React组件:Dragact 0.1.4发布

    Dragact 是一款React组件,他能够使你简单.快速的构建出一款强大的 拖拽式网格(grid)布局. 仓库地址:Dragact 经过几天的迭代时间Dragact已经能够支持自由缩放功能了(res ...

  8. Ubuntu 安装openmpi

    Ubuntu14.04TLS安装openmpi参考:https://likymice.wordpress.com/2015/03/13/install-open-mpi-in-ubuntu-14-04 ...

  9. 5 LAMP配置管理:模块(state、file、pkg、service)、jinja模板、job管理、redis主从

    1. 配置管理:state和file https://docs.saltstack.com/en/latest/topics/states/index.html Full list of states ...

  10. 浮动float和清除clear

    一.浮动(float) float简介 取值:left,right,none,inherit,默认none(不浮动) 可应用与所有元素 没有继承性 不在正常流中,但会影响布局.因为一个元素浮动时,其他 ...