博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
kindEditor或中的图片粘贴处理
阅读量:5912 次
发布时间:2019-06-19

本文共 1988 字,大约阅读时间需要 6 分钟。

hot3.png

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

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

你可能感兴趣的文章
网站页面性能优化的34条黄金守则(网上到处都有了,还是要转一下)
查看>>
Video4Linux2 part 3: Basic ioctl() handling
查看>>
Xshell--How_to_import_SecureCRT_session
查看>>
Linux学习笔记<二十五>——openssl服务
查看>>
思科交换机 DHCP SNOOPING、DAI、IPSG方案
查看>>
Dell AIM 助您加速实现的私有云应用
查看>>
lua 四舍五入
查看>>
“.网络”域名总量TOP10:新网蝉联第一 份额近30%
查看>>
Oracle数据库10g(11g)安装
查看>>
ccna 07 路由协议原理
查看>>
无法在模块路径中找到主题引擎:“murrine”
查看>>
Nginx邮件代理
查看>>
php和java环境整合
查看>>
iptables之FORWARD转发链
查看>>
函数计算性能福利篇(二) —— 业务冷启动优化
查看>>
修改hadoop脚本改变CLASSPATH中jar加载顺序
查看>>
二维数组的查找
查看>>
Ansible介绍
查看>>
【数据结构】包含min函数的栈
查看>>
NFS,Samba,ftp,http——NFS
查看>>