这次试着修改了下KindEditor的图片空间管理,加了一个删除图片的功能进去。
第一步,开放插件显示图片空间功能,代码如下:
// 编辑器加载
$.extend(KindEditor.options.htmlTags, {style:['type']});
KindEditor.ready(function(K) {
editor = K.create('#editor',{
minHight:500,
uploadJson : "/example/editorUpload", //指定上传文件的服务器端程序。
fileManagerJson : "/example/editorFileManager", //指定浏览远程图片的服务器端程序。
allowImageUpload : true, //true时显示图片上传按钮。
allowFileManager : true, //true时显示浏览远程服务器按钮。
items : [
'undo', 'redo', 'preview', 'cut', 'copy', 'paste', '|', 'formatblock', 'fontname', 'fontsize', 'pagebreak', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough',
'lineheight', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist',
'insertunorderedlist', 'indent', 'outdent', '|', 'fullscreen', 'table', 'image', 'multiimage', 'flash', 'media', 'insertfile', 'hr', 'link', 'unlink'
]
});
});
//获取用户图片空间
public function actionEditorFileManager(){
$extensionsArr = array(
'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
'flash' => array('swf', 'flv', 'mp4'),
'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb', 'mp4'),
'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2', 'pdf')
);
$path = ROOT.$this->PATH_EDITOR/* .(isset($_GET["dir"])?$_GET["dir"]:"image") */;
$extensions = isset($_GET["dir"])?$extensionsArr[$_GET["dir"]]:$extensionsArr["image"];
$this->getEditorFile($path,$extensions);
}
//获取图片空间详细内容
function getEditorFile($path,$ext_arr=Array('gif', 'jpg', 'jpeg', 'png', 'bmp')){
$root_path = $path;
$root_url = $path;
//目录名
$dir_name = empty($_GET['dir']) ? '' : trim($_GET['dir']);
if (!in_array($dir_name, array('', 'image', 'flash', 'media', 'file'))) {
echo json_encode(Array("result"=>0,"msg"=>"文件夹路劲非法"));
exit;
}
if ($dir_name !== '') {
$root_path .= $dir_name . "/";
$root_url .= $dir_name . "/";
if (!file_exists($root_path)) {
mkdir($root_path);
}
}
//根据path参数,设置各路径和URL
if (empty($_GET['path'])) {
$current_path = realpath($root_path) . '/';
$current_url = $root_url;
$current_dir_path = '';
$moveup_dir_path = '';
} else {
$current_path = realpath($root_path) . '/' . $this->_iconv($_GET['path']);
$current_url = $root_url . $_GET['path'];
$current_dir_path = $_GET['path'];
$moveup_dir_path = preg_replace('/(.*?)[^\/]+\/$/', '$1', $current_dir_path);
}
//排序形式,name or size or type
$order = empty($_GET['order']) ? 'name' : strtolower($_GET['order']);
//不允许使用..移动到上一级目录
if (preg_match('/\.\./', $current_path)) {
echo json_encode(Array("result"=>0,"msg"=>'不允许使用模糊路径'));
exit;
}
//最后一个字符不是/
if (!preg_match('/\/$/', $current_path)) {
echo json_encode(Array("result"=>0,"msg"=>'路径必须以/结尾'));
exit;
}
//目录不存在或不是目录
if (!file_exists($current_path) || !is_dir($current_path)) {
echo json_encode(Array("result"=>0,"msg"=>'路径不存在'));
exit;
}
//遍历目录取得文件信息
$file_list = array();
if ($handle = opendir($current_path)) {
$i = 0;
while (false !== ($filename = readdir($handle))) {
if ($filename{0} == '.') continue;
$file = $current_path . $filename;
if (is_dir($file)) {
$file_list[$i]['is_dir'] = true; //是否文件夹
$file_list[$i]['has_file'] = (count(scandir($file)) > 2); //文件夹是否包含文件
$file_list[$i]['filesize'] = 0; //文件大小
$file_list[$i]['is_photo'] = false; //是否图片
$file_list[$i]['filetype'] = ''; //文件类别,用扩展名判断
} else {
$file_list[$i]['is_dir'] = false;
$file_list[$i]['has_file'] = false;
$file_list[$i]['filesize'] = filesize($file);
$file_list[$i]['dir_path'] = '';
$file_ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
$file_list[$i]['is_photo'] = in_array($file_ext, $ext_arr);
$file_list[$i]['filetype'] = $file_ext;
}
$file_list[$i]['filename'] = $this->_deiconv($filename); //文件名,包含扩展名
$file_list[$i]['datetime'] = date('Y-m-d H:i:s', filemtime($file)); //文件最后修改时间
$i++;
}
closedir($handle);
}
usort($file_list, "cmp_func");
$result = array();
//相对于根目录的上一级目录
$result['moveup_dir_path'] = $moveup_dir_path;
//相对于根目录的当前目录
$result['current_dir_path'] = $current_dir_path;
//当前目录的URL
$result['current_url'] = substr($current_url, strlen(ROOT));
//文件数
$result['total_count'] = count($file_list);
//文件列表数组
$result['file_list'] = $file_list;
echo json_encode($result);
exit();
}
这里是修改了KindEditor自带的file_manager_json.php的代码得来的。
第三步,修改浏览图片空间界面,显示插入按钮还有删除按钮,操作的文件是 "/kindeditor-4.1.10/plugins/filemanager/filemanager.js"也就是KindEditor里的filemanager插件 ,具体操作如下:
1.插入HTML代码还有相应的按钮操作代码:
在createView方法里的
div.append('<div class="ke-name" title="' + data.filename + '">' + data.filename + '</div>');
前面,也就是该方法的最后一行前面插入如下代码:
if(data.is_photo){
var bgHtml = [
'<div class="operate-box">',
' <div class="black_overlay"></div>',
' <div class="operate">',
' <div class="left"><img src="'+imgPath+'add_24.png" alt="" class="icon-add"/></div>',
' <div class="right"><img src="'+imgPath+'delete_24.png" alt="" class="icon-delete"/></div>',
' </div>',
'</div>'
].join(" ");
photoDiv.append(bgHtml);
$(photoDiv).find(".icon-add").click(function(event){
//为点击事件添加一个判断开关,true时触发传递图片地址事件
$(this).parents(".ke-photo").attr("ifOperate","true");
bindEvent(photoDiv, result, data, createView,true);
});
$(photoDiv).find(".icon-delete").click(function(event){
if(!confirm("确认删除该图片吗?")) return false;
var url = $(this).parents(".ke-photo").find("img:first").attr("src");
//发送删除图片请求
var dirPath = encodeURIComponent(result.current_dir_path);
$.post("/example/deleteSelfImages",{url:url},function(json){
//重新加载目录下图片、目录信息
reloadPage(dirPath, orderTypeBox.val(), createView);
alert(json.msg);
},"json");
});
}
这里添加了2个按钮图片素材,分别是add_24.png
还有 delete_24.png,放在 "/kindeditor-4.1.10/plugins/filemanager/images/"目录下。
这段代码添加了一个选择图片还有一个删除图片的按钮,还有对应的单击事件。
2.为按钮添加css样式:
在
self.plugin.filemanagerDialog = function(options) {
方法体内的html数组变量赋值最后加上对应的css样式代码,修改后的代码如下:
var html = [
'<div style="padding:10px 20px;">',
// header start
'<div class="ke-plugin-filemanager-header">',
// left start
'<div class="ke-left">',
'<img class="ke-inline-block" name="moveupImg" src="' + imgPath + 'go-up.gif" width="16" height="16" border="0" alt="" /> ',
'<a class="ke-inline-block" name="moveupLink" href="javascript:;">' + lang.moveup + '</a>',
'</div>',
// right start
'<div class="ke-right">',
lang.viewType + ' <select class="ke-inline-block" name="viewType">',
'<option value="VIEW">' + lang.viewImage + '</option>',
'<option value="LIST">' + lang.listImage + '</option>',
'</select> ',
lang.orderType + ' <select class="ke-inline-block" name="orderType">',
'<option value="NAME">' + lang.fileName + '</option>',
'<option value="SIZE">' + lang.fileSize + '</option>',
'<option value="TYPE">' + lang.fileType + '</option>',
'</select>',
'</div>',
'<div class="ke-clearfix"></div>',
'</div>',
// body start
//添加的代码 - 开始
'<style type="text/css">',
'.relative{position:relative;}',
'.operate-box{',
' position:absolute;top:-100px;left:0px;',
' transition:top 0.6s;',
' -moz-transition:top 0.6s; /* Firefox 4 */',
' -webkit-transition:top 0.6s; /* Safari and Chrome */',
' -o-transition:top 0.6s; /* Opera */',
'}',
'.black_overlay{',
' background-color:black;-moz-opacity:0.8;opacity:.60;filter:alpha(opacity=80);position:absolute;left:0px;top:0px;',
' width: 100px;height: 100px;z-index:99;}',
'.operate{',
' position:absolute;left:0px;top:0px;',
' width: 100px;height: 100px;z-index:199;padding:0px 15px;}',
'.operate .left, .operate .right{width:30px;height:100px;line-height:100px;display:inline-block;text-align:center;}',
'.operate img{',
' width:20px;border-radius:12px;z-index:199;background:#fff;',
' transition:transform 0.6s;',
' -moz-transition:transform 0.6s; /* Firefox 4 */',
' -webkit-transition:transform 0.6s; /* Safari and Chrome */',
' -o-transition:transform 0.6s; /* Opera */',
'}',
'.operate img:hover{',
' transform:scale(1.5,1.5);',
' -ms-transform:scale(1.5,1.5); /* IE 9 */',
' -moz-transform:scale(1.5,1.5); /* Firefox */',
' -webkit-transform:scale(1.5,1.5); /* Safari and Chrome */',
' -o-transform:scale(1.5,1.5); /* Opera */',
'}',
'.operate .icon-add{border:1px solid #a6cc7a;}',
'.operate .icon-delete{border:1px solid #ef6455;}',
'</style>',
//添加的代码 - 结束
'<div class="ke-plugin-filemanager-body"></div>',
'</div>'
].join('');
这里的样式是让鼠标移入图片框内时,操作框向下滑入图片框。鼠标移出
图片框内时,操作框向上滑入图片框。
3.修改图片框的鼠标移入、移出事件:
在 createView 方法体内找到 photoDiv 的赋值代码,修改其mouseover、mouseout事件,修改后的具体代码如下:
var photoDiv = K('<div class="ke-inline-block ke-photo relative"></div>')
.mouseover(function(e) {
K(this).addClass('ke-on');
//鼠标移入,让操作框向下滑入
$(K(this)).find(".operate-box").css({"top":"0px"});
})
.mouseout(function(e) {
K(this).removeClass('ke-on');
//鼠标移出,让操作框向下滑出
$(K(this)).find(".operate-box").css({"top":"-100px"});
});
这里的重点是在 1 的添加HTML按钮还有其单击事件上,2、3纯粹是个人想试试做一下css样式。
如果觉得麻烦的话,可以自己随便修改下2的css样式,喜欢怎么改就怎么改,看个人喜欢。
第四步,在后端为删除图片请求加上相应的处理代码,具体如下:
//删除用户个人图片空间图片 public function actionDeleteSelfImages(){ $url = $_POST["url"];
//直接操作的服务器上的文件,安全方面一定要注意,一定要添加权限设置,切记切记!
//........$r = unlink(ROOT.$this->_iconv($url));//检查用户是否有权限删除图片
$this->JSON_RS($r,"删除成功","删除失败");}//输出结果
最后附上效果截图如下:
//检查用户是否有权限删除图片
//检查用户是否有权限删除图片
//........