kindeditor图片空间添加删除图片功能

主题: kindeditor图片空间添加删除图片功能

作者: xieliang, 发布日期: 2013-02-28 08:27:50, 浏览数: 12403

这里是扩展的编辑器的插件，以前一直在用xh编辑器，后来了解到kindeditor后就“深深的”被他吸引了，因为他扩展性太强了，且还开源免费，他自带有单个图片上传和批量图片上传，还有个“图片空间”，图片空间就是在线浏览你以前上传过的图片，点击后可以直接插入到编辑器内，省去了你误删图片后在重新上传而重复的问题，这里写的是为了方便在图片空间上扩展个删除图片的功能，可以实时的预览，插入和删除。废话不说了，学习吧开始分析源码。

首先你得自己配置好kindedior编辑器，官网有详细配置教程(http://www.kindsoft.net/)，这里不说了。配置好后回看到如图：

kindeditor图片空间添加删除图片功能

其中的那个有一个加号的小标是单个删除图片和图片空间，有两个加号的小标是批量上传图片，这里我们扩展的是图片空间，点击上传图片，在点图片空间，就会出现以日期建立的文件夹，点击文件夹可以打开里面的以前上传的图片，我们这里要做的是：如果打开的是图片，则滑过的时候添加一个删除按钮，如果直接点击图片就还是以前的插入，如果点击删除则提示“是否删除”，确认后则直接删除这个图片（这里要结合后端进行ajax无刷新删除），且还会在硬盘上删除这个图片。

先分析下他的图片空间打开图片文件夹后的HTML结构，用firebug分析下，如图：

kindeditor图片空间添加删除图片功能

可以得到 div class="ke-inline=block ke-item"的容器是一个图片和名字循环出来的，他里面还有2个Div，一个是上面图片的，一个是下面名字的，如：

<div class="ke-inline-block ke-item">
    <div class="ke-inline-block ke-photo" style="cursor: pointer;" title="20120820091315514.jpg (8KB, 2013-02-16 05:16:53)">
          <img width="80" height="80" alt="20120820091315514.jpg" src="/upload/image/20130213/20120820091315514.jpg">
     </div>
     <div title="20120820091315514.jpg" class="ke-name">20120820091315514.jpg</div>
</div>

默认的是滑过ke-inline-block的时候给自己添加一个class来变化边框的，我们该下结构，打开kindeditor的插件目录：plugins中的filemanager文件夹，这个文件夹时图片空间的扩展插件 js（如果你的kindeditor是用的kindeditor-all.js的话，就直接打开这个即可，因为这个是完全版），查找ke-inline-block ke-item，它在createView函数内，这个函数意思是创建试图，也就是缩略图，还有个详细信息createList，这里不管createList，把查找出的那改成

div = K('<div class="ke-inline-block ke-item" style="position:relative;"></div>');

只添加了个定位的style，设置这个循环的图片，名字Div为相对定位。

var photoDiv = K('<div class="ke-inline-block ke-photo"></div>')
.mouseover(function(e) {
K(this).addClass('ke-on');
})
.mouseout(function(e) {
K(this).removeClass('ke-on');
});

把上面替换为

var photoDiv = K('<div class="ke-inline-block ke-photo"></div>');//创建图片div
div.append(photoDiv);//插入到循环div里
div.mouseover(function(e) {//滑过这个div的时候
    K(this).children().eq(0).addClass('ke-on');//给下面的第一个div也就说图片div添加ke-on
    data.is_photo&&K(this).children().eq(2).css("display","block");//如果是图片格式就查找当前下面的第3个标签元素设置为可见
})
.mouseout(function(e) {//划出这个循环div时
    K(this).children().eq(0).removeClass('ke-on');//删除ke-on类
    data.is_photo&&K(this).children().eq(2).css("display","none");//如果是图片格式设置当前下第3个标签为隐藏
});

替换这个就是让滑过的时候把我们添加的删除按钮显示，你会说我们没有添加按钮啊，不要急，马上添加。（这里没data是后端传后来的数据，如果data.is_photo为ture说明是图片，因为还有目录类的，我们这里不对目录进行操作）

找到
div.append('<div class="ke-name" title="' + data.filename + '">' + data.filename + '</div>');
这行，这行意思是添加图片下面的那个名字，在这个下面添加代码：

if(data.is_photo){//如果是图片
    var _span=K('<span class="xl_span" data-url="'+K.formatUrl(result.current_url + data.filename, 'absolute')+'" style="position:absolute;display:none;width:102px;background:#0690d2;color:#FFF;text-align:center; cursor: pointer;line-height:20px;bottom:-3px;left:0;">删除</span>');
    div.append(_span);
}

上面代码是在名字下面添加删除按钮，当然必须是图片类，如果是目录类则直接无视。K.formatUrl(result.current_url + data.filename, 'absolute')这句话是用kindeditor内置函数格式化图片路径，得到绝对路径，如/upload/image/2006/1.gif，我们把它存到data-url上来方便下面使用;

找到function createView(result) {下面的for (var i = 0, len = fileList.length; i < len; i++) {，在这个循环外面添加代码，如图：

kindeditor图片空间添加删除图片功能

添加代码：(下面可能要用到jquery了，你也完全可以用别的或者原生js，想要了解jquery请猛点：jquery快速入门)

K(".xl_span").click(function(){//这里的.xl_span对应着刚才插入的删除按钮上的class
    var $this=K(this);
    if(!confirm('确定删除吗 ?')) {//提示，如果点击取消则直接退出
        return false;
    }
    $.post('/admin/file_manager_json.php',{action:"delete",url:$this.attr("data-url")},function(res){//jquery的post，action为指定的配合后端用，url是获取刚才存在删除按钮上的图片路径，你完全可以用别的来写，因为用不好kindeditor的js库才用的jquery
        res==1?$this.parent().remove():alert("删除出现错误");//如果返回1则直接删除 图片，名字的Div达到即时删除，否则提示
        if(K(".ke-plugin-filemanager-body").children().length<1){K(".ke-plugin-filemanager-body").html("没有图片了")}//检查是否没有图片了
    })
})

其中的'/admin/file_manager_json.php'是后端接受指的路径，现在js修改的部分就Ok了，你刷新去试下，看看是否有删除按钮。如图：

kindeditor图片空间添加删除图片功能

下面应该修改后端文件了，这里用的php程序，打开后端文件（可以新建也可以在“图片空间”后端文件上修改，建议在上修改），你完全可以用别的如asp,asp.net,jsp等，下面是添加的php代码：

//谢亮添加删除的
if($_POST["action"]=="delete"){//如果action=delete
	$url=$_POST["url"];
	if(empty($url)){//如果url为空
		die(0);	
	}
	$url=str_replace("/upload/","../../upload/",$url);//替换路径
	if(file_exists($url)){//检查文件是否存在
		$result=unlink($url);//删除文件
		if($result){//如果成功删除
			echo 1;	
		}else{
			echo 0;	
		}
	}else{
		echo 0;	
	}
	exit();
}

其中的$url=str_replace时把传过来的绝对图片路径替换为相对于当前后端文件的相对路径，因为这样才能删除吧。（我用绝对路径删除不了，所以这样了）。至此kindeditor图片空间添加删除图片功能全部完成，学习吧测试完全没问题。