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

三叶运维


