我们在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 然后在处理为实际图片
这个方法兼容
