在MVC3中修改KindEditor实现图片删除
实现 修改 删除 图片 mvc3 KindEditor
2023-09-11 14:17:16 时间
编辑器KindEditor可以上传图片,但却不能删除图片,因此我们通过修改一些文件,对KindEditor进行扩展,使得KindEditor能删除服务器上的图片。
主要方法就是:在图片空间中浏览图片,当鼠标滑动到图片上时,在图片下面添加一个删除按钮,当点击删除按钮时,通过ajax调用action进行删除。
一、修改zh_CN.js文件。
打开lang文件夹下的zh_CN.js文件,找到
'filemanager.fileType' : '类型',
这个地方,在下面添加几行代码,变成如下:
'filemanager.fileType': '类型',
'filemanager.deleteImg': '删除',
'filemanager.deleteConfirm': '真的要删除吗?',
'filemanager.deleteError': '删除图片出错!',
'filemanager.noImg': '没有图片了',
二、修改filemanager.js文件
打开plugins/filemanager文件夹下面的filemanager.js文件。
1、找到
div = K('<div class="ke-inline-block ke-item"></div>');
这个地方,修改为
div = K('<div class="ke-inline-block ke-item" style="position:relative;"></div>');
即增加了一个style样式。
2、找到
for (var i = 0, len = fileList.length; i < len; i++) {.....}
这个循环语句,在这个循环语句结束之后,在}的后面(注意地方不要找错),加上代码
K(".xl_span").click(function () { var $this = K(this); if (!confirm(lang.deleteConfirm)) { return false; } $.post('delImg', { url: $this.attr("data-url") }, function (res) { res == '1' ? $this.parent().remove() : alert(lang.deleteError); if (K(".ke-plugin-filemanager-body").children().length < 1) { K(".ke-plugin-filemanager-body").html(lang.noImg) } }) })
这串代码的作用,是利用Jquery中的ajax来对图片进行删除。
3、找到
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'); }); div.append(photoDiv);
这个地方,将之替换成
var photoDiv = K('<div class="ke-inline-block ke-photo"></div>'); div.append(photoDiv); div.mouseover(function (e) { K(this).children().eq(0).addClass('ke-on'); data.is_photo && K(this).children().eq(2).css("display", "block"); }) .mouseout(function (e) { K(this).children().eq(0).removeClass('ke-on'); data.is_photo && K(this).children().eq(2).css("display", "none"); });
4、找到
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;">' + lang.deleteImg + '</span>'); div.append(_span); }
这串代码的作用就是鼠标滑动到图片上时,添加一个删除按钮。
至此,filemanager.js文件就修改完了,稍微有点麻烦。全文件代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/******************************************************************************* * KindEditor - WYSIWYG HTML Editor for Internet * Copyright (C) 2006-2011 kindsoft.net * * @author Roddy <luolonghao@gmail.com> * @site http://www.kindsoft.net/ * @licence http://www.kindsoft.net/license.php *******************************************************************************/ KindEditor.plugin('filemanager', function (K) { var self = this, name = 'filemanager', fileManagerJson = K.undef(self.fileManagerJson, self.basePath + 'php/file_manager_json.php'), imgPath = self.pluginsPath + name + '/images/', lang = self.lang(name + '.'); function makeFileTitle(filename, filesize, datetime) { return filename + ' (' + Math.ceil(filesize / 1024) + 'KB, ' + datetime + ')'; } function bindTitle(el, data) { if (data.is_dir) { el.attr('title', data.filename); } else { el.attr('title', makeFileTitle(data.filename, data.filesize, data.datetime)); } } self.plugin.filemanagerDialog = function (options) { var width = K.undef(options.width, 650), height = K.undef(options.height, 510), dirName = K.undef(options.dirName, ''), viewType = K.undef(options.viewType, 'VIEW').toUpperCase(), // "LIST" or "VIEW" clickFn = options.clickFn; 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 '<div class="ke-plugin-filemanager-body"></div>', '</div>' ].join(''); var dialog = self.createDialog({ name: name, width: width, height: height, title: self.lang(name), body: html }), div = dialog.div, bodyDiv = K('.ke-plugin-filemanager-body', div), moveupImg = K('[name="moveupImg"]', div), moveupLink = K('[name="moveupLink"]', div), viewServerBtn = K('[name="viewServer"]', div), viewTypeBox = K('[name="viewType"]', div), orderTypeBox = K('[name="orderType"]', div); function reloadPage(path, order, func) { var param = 'path=' + path + '&order=' + order + '&dir=' + dirName; dialog.showLoading(self.lang('ajaxLoading')); K.ajax(K.addParam(fileManagerJson, param + '&' + new Date().getTime()), function (data) { dialog.hideLoading(); func(data); }); } var elList = []; function bindEvent(el, result, data, createFunc) { var fileUrl = K.formatUrl(result.current_url + data.filename, 'absolute'), dirPath = encodeURIComponent(result.current_dir_path + data.filename + '/'); if (data.is_dir) { el.click(function (e) { reloadPage(dirPath, orderTypeBox.val(), createFunc); }); } else if (data.is_photo) { el.click(function (e) { clickFn.call(this, fileUrl, data.filename); }); } else { el.click(function (e) { clickFn.call(this, fileUrl, data.filename); }); } elList.push(el); } function createCommon(result, createFunc) { // remove events K.each(elList, function () { this.unbind(); }); moveupLink.unbind(); viewTypeBox.unbind(); orderTypeBox.unbind(); // add events if (result.current_dir_path) { moveupLink.click(function (e) { reloadPage(result.moveup_dir_path, orderTypeBox.val(), createFunc); }); } function changeFunc() { if (viewTypeBox.val() == 'VIEW') { reloadPage(result.current_dir_path, orderTypeBox.val(), createView); } else { reloadPage(result.current_dir_path, orderTypeBox.val(), createList); } } viewTypeBox.change(changeFunc); orderTypeBox.change(changeFunc); bodyDiv.html(''); } function createList(result) { createCommon(result, createList); var table = document.createElement('table'); table.className = 'ke-table'; table.cellPadding = 0; table.cellSpacing = 0; table.border = 0; bodyDiv.append(table); var fileList = result.file_list; for (var i = 0, len = fileList.length; i < len; i++) { var data = fileList[i], row = K(table.insertRow(i)); row.mouseover(function (e) { K(this).addClass('ke-on'); }) .mouseout(function (e) { K(this).removeClass('ke-on'); }); var iconUrl = imgPath + (data.is_dir ? 'folder-16.gif' : 'file-16.gif'), img = K('<img src="' + iconUrl + '" width="16" height="16" alt="' + data.filename + '" align="absmiddle" />'), cell0 = K(row[0].insertCell(0)).addClass('ke-cell ke-name').append(img).append(document.createTextNode(' ' + data.filename)); if (!data.is_dir || data.has_file) { row.css('cursor', 'pointer'); cell0.attr('title', data.filename); bindEvent(cell0, result, data, createList); } else { cell0.attr('title', lang.emptyFolder); } K(row[0].insertCell(1)).addClass('ke-cell ke-size').html(data.is_dir ? '-' : Math.ceil(data.filesize / 1024) + 'KB'); K(row[0].insertCell(2)).addClass('ke-cell ke-datetime').html(data.datetime); } } function createView(result) { createCommon(result, createView); var fileList = result.file_list; for (var i = 0, len = fileList.length; i < len; i++) { var data = fileList[i], div = K('<div class="ke-inline-block ke-item" style="position:relative;"></div>'); bodyDiv.append(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.append(photoDiv); div.mouseover(function (e) { K(this).children().eq(0).addClass('ke-on'); data.is_photo && K(this).children().eq(2).css("display", "block"); }) .mouseout(function (e) { K(this).children().eq(0).removeClass('ke-on'); data.is_photo && K(this).children().eq(2).css("display", "none"); }); //div.append(photoDiv); var fileUrl = result.current_url + data.filename, iconUrl = data.is_dir ? imgPath + 'folder-64.gif' : (data.is_photo ? fileUrl : imgPath + 'file-64.gif'); var img = K('<img src="' + iconUrl + '" width="80" height="80" alt="' + data.filename + '" />'); if (!data.is_dir || data.has_file) { photoDiv.css('cursor', 'pointer'); bindTitle(photoDiv, data); bindEvent(photoDiv, result, data, createView); } else { photoDiv.attr('title', lang.emptyFolder); } photoDiv.append(img); 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;">' + lang.deleteImg + '</span>'); div.append(_span); } } K(".xl_span").click(function () { var $this = K(this); if (!confirm(lang.deleteConfirm)) { return false; } $.post('delImg', { url: $this.attr("data-url") }, function (res) { res == '1' ? $this.parent().remove() : alert(lang.deleteError); if (K(".ke-plugin-filemanager-body").children().length < 1) { K(".ke-plugin-filemanager-body").html(lang.noImg) } }) }) } viewTypeBox.val(viewType); reloadPage('', orderTypeBox.val(), viewType == 'VIEW' ? createView : createList); return dialog; } });
三、最后一步,在控制器里,添加一个删除文件的action
先在控件器里面添加命名空间System.IO;
然后添加action
public ActionResult delImg(string url) { if (Request.IsAjaxRequest()) { FileInfo file = new FileInfo(Server.MapPath(url)); if (file.Exists) { file.Delete(); return Content("1"); } else return Content("-1"); } else return Content("-1"); }
至此,全部改造完成,快刷新看看效果吧!
相关文章
- Osg-OSG利用DrawCallback实现动画效果(Qt5.14.2+osgE3.6.5+win10)-No24-DrawCallback
- Java实现 LeetCode 814 二叉树剪枝 (遍历树)
- Java实现 LeetCode 307 区域和检索 - 数组可修改
- Java实现 LeetCode 307 区域和检索 - 数组可修改
- java实现 历届试题 蓝桥杯 打印十字图
- java线程-synchronized实现可见性代码
- 在ListView控件中实现修改功能
- 9-crm项目-kingadmin,修改和添加页面---动态modelform生成和filter_horizontal的实现
- 【secureCRT】通过修改buttonbar的配置文件实现快捷设置buttonbar和button
- 【IOS-COCOS2D游戏开发之十五】详解CCPROGRESSTIMER 进度条并修改COCOS2D源码实现“理想”游戏进度条!
- 关于promise的实现
- 【secureCRT】通过修改buttonbar的配置文件实现快捷设置buttonbar和button
- paddlepaddle 34 调整模型的layer结构与forward流程(实现layer的增删改与forward的修改)
- 使用 HTTP PUT, PATCH 以及 MERGE 请求消费 SAP ABAP OData 服务修改操作的实现及其区别试读版
- 另一种方式实现事务码SE16里的结果集修改
- paip.自动import的实现跟java.lang.SecurityException Prohibited package name java
- vue 点击切换动态修改Class变化,实现当前样式改变(点击选中高亮)
- Flutter进阶第4篇: 实现简单的新闻系统渲染新闻详情数据以及用flutter_html解析html
- Database之SQLSever:SQLSever数据表管理(GUI法/SQL语句命令法两种方法实现建立表、修改表,以及增、删、改、查)之详细攻略
- Database之SQLSever:SQLSever数据库管理(GUI法/SQL语句命令法两种方法实现备份(完整备份、差异备份、日志备份)、还原、删除、修改数据库等案例)之详细攻略
- Python语言编程学习:文件路径变量修改,利用os模块固定文件父路径,变换文件子路径实现代码
- 〖Python 数据库开发实战 - Python与MySQL交互篇⑰〗- 项目实战 - 实现用户管理 - 修改用户
- Mock服务设计与实现:MySQL驱动字节码修改增强
- 80. 删除有序数组中的重复项 II-通过计数器实现原地修改
- TI AM335x通过rmii,修改phy,实现双网络接口,实现双路百兆网,LAN8720
- 七大排序算法的多语言代码实现