kindEditor或中的图片粘贴处理

摘要: 从CLIPBOARD中拷贝图片

在使用kindEditor的时候，如果我们通过拷贝粘贴的方式将一个图片/截图文件粘贴到kindEditor中时，会在body部分生成如下一部分代码：



提交时，这部分内容会原封不动的提交到后台，写入数据库。通过查阅资料（http://www.foliotek.com/devblog/copy-images-from-clipboard-in-javascript/），找到一种方式，在粘贴图片时，将图片上传，html中则只存放文件在服务区上保存的路径，提交到后台之后，则将文件路径写入数据库，读取时加载即可。如下所示：



其实不仅仅是kindEditor，其它场景下的图片拷贝都类似，可以采用上述方式来处理。在aftreCreate中为body绑定paste事件，拷贝时同时将图片内容发送给服务器，前台的代码如下所示：

var K = KindEditor;
keEditor = K.create('#' + editorID,
{
//......
afterCreate : function()
{
var doc = this.edit.doc;
var cmd = this.edit.cmd;
/* Paste in chrome.*/
if(K.WEBKIT)
{
K(doc.body).bind('paste', function(e)
{
var $this = $(this);
var original =  e.originalEvent;
var file =  original.clipboardData.items[0].getAsFile();
var reader = new FileReader();
reader.onload = function (event)
{
var result = event.target.result;
var arr = result.split(",");
var data = arr[1]; // raw base64
var contentType = arr[0].split(";")[0].split(":")[1];

html = '<img src="' + result + '" alt="" />';
$.post("imageUpload", editor: html, function(data)
{
if(data) return cmd.inserthtml(data);

alert(v.errorUnwritable);
return cmd.inserthtml(html);
});
};
reader.readAsDataURL(file);
});
}

/* Paste in firefox or IE.*/
if(K.GECKO || K.IE)
{
K(doc.body).bind('paste', function(ev)
{
setTimeout(function()
{
var html = K(doc.body).html();
if(html.search(/<img src="data:.+;base64,/) > -1)
{
$.post("imageUpload", editor: html, function(data)
{
if(data) return K(doc.body).html(data);

alert(v.errorUnwritable);
return K(doc.body).html(data);
});
}
}, 80);
});
}
/* End */
}
});

在后端，我们需要响应ajax请求，并返回一个图片存放的路径和文件名，代码如下所示（PHP）：

public function pasteImage($data)
{
$data = str_replace('\"', '"', $data);

ini_set('pcre.backtrack_limit', strlen($data));

/* 根据特征匹配图片内容 */
preg_match_all('/<img src="(data:image\/(\S+);base64,(\S+))".*\/>/U', $data, $out);
foreach($out[3] as $key => $base64Image)
{
/* 解密内容 */
$imageData = base64_decode($base64Image);

$extension   = $out[2][$key];

/* 根据key和扩展名生成一个文件名称 */
$pathname    = $this->setPathName($key, extension);

/* 保存文件 */
file_put_contents($this->tmpPath . $pathname, $imageData);

/* 将data:image....的内容替换为文件路径 */
$data = str_replace($out[1][$key], $this->webDataPath . $pathname, $data);
}

return $data;
}