在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;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 <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,
            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;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");
        }

至此，全部改造完成，快刷新看看效果吧！