ckeditor 粘贴图片,粘贴截图

简介: 我们在ckeditor 中有上传图片,但是实际使用中这种手动上传图片方式并不是很方便,而是复制或者截图粘贴图片。 这里我们实现主要是获取对应的粘贴事件。CKEDITOR.instances["editor1"].on('instanceReady', function(e) { this.document.on("paste", function(e) {

我们在ckeditor 中有上传图片,但是实际使用中这种手动上传图片方式并不是很方便,而是复制或者截图粘贴图片。
这里我们实现主要是获取对应的粘贴事件。

CKEDITOR.instances["editor1"].on('instanceReady', function(e) {
    this.document.on("paste", function(e) {
        var items = e.data.$.clipboardData.items;
        for(var i = 0; i < items.length; ++i) {
            var item = items[i];
            if(item.kind == 'file' && item.type == 'image/png') {
                var imgFile = item.getAsFile();
                if(!imgFile) {
                    return true;
                }
                var reader = new FileReader();
                reader.readAsDataURL(imgFile);
                reader.onload = function(e) {
                    //显示文件  
                    CKEDITOR.instances["editor1"].insertHtml('<img src="' + this.result + '" alt="" />');
                }
                return false;
            }
        }
    });
});

这里先把对应事件处理,把粘贴进来的图片处理为base64 格式。(这里我们可以直接再这里上传后再进行标签插入,因为上传图片肯定有一点时间,这里为了界面流畅,可以不在这里处理)
这样我们粘贴就可以出现图片了。但是我们要进行图片上传或者什么图片,同时还有在QQ 聊天窗口里面直接右键复制这样的图片粘贴是无法显示的。这样html 源码直接有个img 标签 标签的src 属性是

file:///d:/.../.../test.png

类似于这样的,但是浏览器都是无法对这类似的路径都无法处理,所有这样我们就只用过滤掉这样的图片。

如果要想复制qq聊天窗口中的图片,可以先将图片双击最大化后右键复制就可以了。

我们想给对应图片进行上传或者其他处理

CKEDITOR.instances["editor1"].on('instanceReady', function(e) {
    this.on("change", function(e) {
        var doc = e.editor.document;
        var img = doc.find("img");
        var count = img.count();
        for(var i = 0; i < count; i++) {
            var item = img.getItem(i).$;
            var src = $(item).attr("src");
            if(src.startsWith("file:///")) {
                layer.msg("不支持该类型的图片");
                $(item).remove();
                return true;
            }
            if(src.startsWith("data:image")) {
                // 处理上传图片
            }
        }
        // 处理空标签
        var p = doc.find("p");
        count = p.count();
        for(var i = 0; i < count; i++) {
            var item = p.getItem(i).$;
            var text = $(item).html();
            if(text == "<!--{cke_protected}{C}%3C!%2D%2DStartFragment%20%2D%2D%3E-->") {
                $(item).remove();
                return true;
            }
        }
    });
});

上面对应处理空标签,是处理粘贴qq 聊天窗口中图片复制过来会自动生成对应一串注释,这个可能是qq 产生的信息,为空整洁我们还是remove 掉。
这里其实我们也不可以不对图片进行base64 转实际文件处理,直接存储base64在html 中,但是这个还是不建议这样操作。
再操作bae64 我们可以在上面方法里面分别处理。我还可以在将整个文档提交到服务器后进行img 标签解析判断是否为base64 然后在处理为实际图片
这个方法兼容

相关文章
|
小程序 API
微信小程序如何点击按钮,复制文本到粘贴板
微信小程序如何点击按钮,复制文本到粘贴板
微信小程序如何点击按钮,复制文本到粘贴板
CKEditor5 支持 WPS 贴贴文字图片,默认贴贴进入空白空格
CKEditor5 支持 WPS 贴贴文字图片,默认贴贴进入空白空格
251 0
|
4月前
|
JavaScript 测试技术
原生js实现将图片内容复制到剪贴板
原生js实现将图片内容复制到剪贴板
|
Web App开发 缓存 前端开发
canvas项目内复制粘贴及自定义菜单复制粘贴实现
一、 产品视角下复制粘贴需要解决的问题 复制粘贴时,需要静默复制(剪切板内不会看到复制的具体内容, 同miro) 统一自定义鼠标复制粘贴和键盘复制粘贴内容 实现外部内容也可以粘贴到内部
1027 0
复制浏览器网页文字后无法正常粘贴情况的解决
本文介绍在复制网页内容后粘贴时,粘贴内容出现一个方框图案而不是当初复制内容的解决办法~
281 1
复制浏览器网页文字后无法正常粘贴情况的解决
|
JavaScript
原生 js 实现截图粘贴预览图片功能
原生 js 实现截图粘贴预览图片功能
140 0
原生 js 实现截图粘贴预览图片功能
|
程序员 Linux
Typora文档中图片无法显示的原因及解决
Typora文档中图片无法显示的原因及解决
1748 0
Typora文档中图片无法显示的原因及解决
|
前端开发
Typora使用(包含Markdown使用及注意说明、修改css样式、自动上传图床)
Typora使用(包含Markdown使用及注意说明、修改css样式、自动上传图床)
Typora使用(包含Markdown使用及注意说明、修改css样式、自动上传图床)
kindeditor富文本编辑器插件 如何实现将本地的图片复制粘贴
目前的需求是 将桌面上的一张图片,进行复制后,可以粘贴到富文本编辑器里面,借用了大佬的这个方法,但是ie浏览器,粘贴图片的时候没办法触发这个paste方法 不知道是因为啥?求大佬帮助
|
缓存 前端开发 JavaScript
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
1187 0