KindEditor图片空间增加图片删除功能

这次试着修改了下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,"删除成功","删除失败");}







最后附上效果截图如下：














 
 

  
  

	//检查用户是否有权限删除图片
 
 

 
 

  
  

	//检查用户是否有权限删除图片
 
 

 
 

  
  
	//........