ckeditor 粘贴图片,粘贴截图
来源:互联网 发布:淘宝的返利网 编辑:程序博客网 时间:2024/05/01 00:59
我们在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 然后在处理为实际图片
这个方法兼容
阅读全文
1 0
- ckeditor 粘贴图片,粘贴截图
- ckeditor 学习笔记【3】粘贴事件/截图粘贴
- ckeditor粘贴的图片自动上传
- CKEDITOR无缝粘贴word
- CKeditor粘贴图片在IE下自动上传的研究
- 网页截图粘贴上传
- CKEditor从word粘贴问题
- ckeditor 粘贴样式不能显示
- 使用kindeditor直接粘贴本地图片或者是qq截图
- Clipboard的使用和CKEditor在编辑框粘贴截图并上传(Java版)
- 实现浏览器截图粘贴功能
- 粘贴截图完成上传功能
- 粘贴图片至RichEditCtl
- 从剪贴板粘贴图片
- java 粘贴图片
- ckeditor的文本文件粘贴的br问题
- Mac 系统 怎么截图 复制 粘贴 快捷键
- 从剪贴板粘贴图片2
- 自动化测试里的数据驱动和关键字驱动思路的理解
- 4515: 又见背包
- 【R语言学习笔记】二、数据可视化
- hdu 2601 An easy problem
- 算法竞赛入门经典 UVa10340子序列
- ckeditor 粘贴图片,粘贴截图
- [jzoj]3505. 【NOIP2013模拟11.4A组】积木(brick) (排列组合vsDP)
- 621. Task Scheduler
- zoj 2724 Windows Message Queue
- 算法-动态规划 Dynamic Programming--从菜鸟到老鸟
- 菜鸟理解关于数据驱动和关键字驱动区别
- 【PAT】【Advanced Level】1016. Phone Bills (25)
- 【Redis笔记】2.Redis命令
- 欢迎使用CSDN-markdown编辑器