前期一直在弄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.效果展示