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参数，设置各路径和URLif (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,"删除成功","删除失败");}


最后附上效果截图如下：

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

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

    //........

KindEditor图片空间增加图片删除功能相关推荐

安卓开发仿微信图片拖拽_仿微信朋友圈发表图片拖拽和删除功能
原标题:仿微信朋友圈发表图片拖拽和删除功能中国联通在香港公布了上市公司2017年中期业绩.2017年上半年,公司主要业绩指标持续向好,收入稳步回升,服务收入达到人民币1,241.1亿元,同比增长3. ...
宝贝上传店铺后把图片空间的图片删了有影响吗
问题1:调用SPU服务异常,原因是:已存在产品ID为:[2154156604] 的产品"} 解决方案:经过分析,这是因为上传的店铺内,已经存在产品ID为:[21541 ...
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示（可以模糊查询）、增加和删除功能，商品表自拟，实现简单菜单操作和分页显示
目录 1.题目说明 2.实验设计 2.1 表设计 2.2 工程结构 3.运行界面截图与说明 4.小结附录:源代码 src/main/java src/main/java/bean Goods.jav ...
html编辑器查找与替换,织梦kindeditor文本编辑器增加“查找替换”功能
织梦kindeditor文本编辑器增加"查找替换"功能效果演示 1.items 里面增加 search 按钮 ['source','|','undo','redo','|','pr ...
php中如何实现逻辑删除,手残党的免死金牌：为Typecho增加逻辑删除功能
手残党的免死金牌:为Typecho增加逻辑删除功能夜月归途 • 2020 年 05 月 31 日这次是要对Typecho动刀子了,主要是为了解决误删问题.我个人对数据的存储是非常没有安全感的,特别 ...
安卓开发仿微信图片拖拽_Android 仿微信朋友圈发表图片拖拽和删除功能
朋友圈实现原理我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Mo ...
Android 仿微信朋友圈发表图片拖拽和删除功能
朋友圈实现原理我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Mo ...
uniapp---------订单多商品评价及图片上传、删除功能
效果图如下: 前端代码如下: <template><view id="orderPj"><view class="Box" v-f ...
Tag标签的增加和删除功能
效果图: html <el-table-column type="expand"><template slot-scope=& ...

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

KindEditor图片空间增加图片删除功能相关推荐

最新文章

热门文章