在MVC3中修改KindEditor实现图片删除
编辑器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文件就修改完了，稍微有点麻烦。全文件代码如下：
/******************************************************************************* * KindEditor - WYSIWYG HTML Editor for Internet * Copyright (C) 2006-2011 kindsoft.net * * @author Roddy <[email protected]> * @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"); }
至此，全部改造完成，快刷新看看效果吧！
