在使用kindEditor的时候,如果我们通过拷贝粘贴的方式将一个图片/截图文件粘贴到kindEditor中时,会在body部分生成如下一部分代码:
提交时,这部分内容会原封不动的提交到后台,写入数据库。通过查阅资料(),找到一种方式,在粘贴图片时,将图片上传,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 = ''; $.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(/
在后端,我们需要响应ajax请求,并返回一个图片存放的路径和文件名,代码如下所示(PHP):
public function pasteImage($data){ $data = str_replace('\"', '"', $data); ini_set('pcre.backtrack_limit', strlen($data)); /* 根据特征匹配图片内容 */ preg_match_all('//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;}