将来的你
一定会感谢现在拼命努力的自己

KindEditor 实现粘贴上传图片

        前期一直在弄wrodpress前台界面,最近开始写日志,发现默认区块编辑器很难用。于是安装了经典的编辑器插件,但是始终感觉不满意,尤其是无法粘贴上传图片,对我这种强迫症的人实在难以忍受。查到网上有人使用百度Ueditor,安装后的确可以粘贴上传,但其排版太恼火,尤其li标签会自动加P 造成页面空白内容太多,按照网站的方法设置始终不如意,一气之下删除掉了。后面无意发现了KindEditor 排版感觉很简单,而且不会自动生成多余的P标签,但无法粘贴上传图片。无奈只能手工改造了

1.编辑初始化文件kindeditor_class.php 47行后添加:

afterCreate:function(){
       var doc   = this.edit.doc; 
       var cmd = this.edit.cmd;
       $(doc.body).bind('paste',function(ev){
              var $this    = $(this);
              var dataItem =  ev.originalEvent.clipboardData.items[0];
              if(dataItem){
                    var file     = dataItem.getAsFile();
                    if(file){
                        var reader = new FileReader();
                        reader.onload = function(evt)  {
                        var imageDataBase64 = evt.target.result;
                        $.post(options.uploadJson+"?imageData=Base64",{"imageDataBase64":imageDataBase64},function(resp){
			    var respData = JSON.parse(resp);
                            if(respData.error == 0){
                                 var html = '<img src="' + respData.url + '" alt="" />';
                                 cmd.inserthtml(html);
                                      }
                                  });
                                };
                        reader.readAsDataURL(file);
                        } 
                        }
                   });
               }
				
	

2.修改php/upload_json.php 23行后添加代码

if (isset($_GET["imageData"]) && $_GET["imageData"]=="Base64"){
	$content = $_POST["imageDataBase64"];
	//创建文件夹
	if ( ! is_dir($save_path . date('Y'))) {
		mkdir($save_path . date('Y'));
		mkdir($save_path . date('Y') . '/' . date('m'));
	} else {
		if ( ! is_dir($save_path . date('Y') . '/' . date('m')))
			mkdir($save_path . date('Y') . '/' . date('m'));
	}
	$save_path .= date('Y') . '/' . date('m') . '/';
	$save_url .= date('Y') . '/' . date('m') . '/';
	if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $content, $result)){
		$type = $result[2];
		$new_file_name = date("YmdHis") . '_' . rand(10000, 99999) .".".$type;
		$file_path = $save_path . $new_file_name;
		if(in_array($type,array('pjpeg','jpeg','jpg','gif','bmp','png'))){
			if(file_put_contents($file_path, base64_decode(str_replace($result[1], '', $content)))){
					@chmod($file_path, 0644);
					$file_url = $save_url . $new_file_name;
					header('Content-type: text/html; charset=UTF-8');
					$json = new Services_JSON();
					echo $json->encode(array('error' => 0, 'url' => $file_url));
					exit;	
				}else{
				alert("上传文件失败。");
				}
	    }else{
		//文件类型错误
			alert("上传文件扩展名是不允许的扩展名");
		}
	 
	}else{
	  //文件错误
	  alert("文件错误");
	}	
}

3.效果展示

赞(49) 打赏
声明:本站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,若涉及侵权请及时告知,将会在第一时间删除,联系邮箱:contact@3yyy.top。文章观点不代表本站立场。本站原创内容未经允许不得转载:三叶运维 » KindEditor 实现粘贴上传图片
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏