kindEditor或中的图片粘贴处理

2019独角兽企业重金招聘Python工程师标准>>>

在使用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;
}

转载于:https://my.oschina.net/ricky716/blog/467894