在MVC3中修改KindEditor实现图片删除

最新推荐文章于 2021-06-08 23:15:48 发布
最新推荐文章于 2021-06-08 23:15:48 发布
阅读量109 收藏
点赞数
文章标签： 测试 php javascript ViewUI
本文详细介绍了如何通过修改KindEditor的zh_CN.js和filemanager.js文件，实现KindEditor不仅能上传图片，还能在图片空间中删除服务器上的图片。通过在图片下方添加删除按钮并使用AJAX进行删除操作，使用户能够更方便地管理上传的图片。
摘要由CSDN通过智能技术生成

编辑器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 <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;
    }

});
View Code

三、最后一步，在控制器里，添加一个删除文件的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");
        }

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

 

一个非IT人士修改网站的遍历之旅和心路历程
weixin_44074762的博客
05-07 1501
如何使用小皮面板搭建本地开发环境、div+css布局中遇到的若干问题和网站美化、kindeditor的使用、页面增删改查和数据库的使用；给网站开发需求者和开发团队的几点忠告
kindeditor图片删除功能
08-04
kindeditor图片删除功能，主要修改3个文件，直接覆盖就行 解决kindeditor上传后不能删除问题。
asp增加kindeditor删除图片功能
06-16
asp增加kindeditor删除图片功能 ，经过很长时间的修改测试。才修改的可以用。外边搜素教程都不全。 我想要五分。不小心成一分了。
KindEditor图片空间增加图片删除功能
了解—学习—进步—满足
02-08 2020
这次试着修改了下KindEditor的图片空间管理，加了一个删除图片的功能进去。 第一步，开放插件显示图片空间功能，代码如下：// 编辑器加载 $.extend(KindEditor.options.htmlTags, {style:['type']}); KindEditor.ready(function(K) { editor = K.create('#editor',{ minHig
KindEditor应用实例——“轻量级”（删掉了上传图片的功能）
10-25
本工程旨在演示如何在java Web中使用KindEditor、如何使用Servlet获取到该文本编辑域的值以及如何从数据库中取出值并在jsp页面中显示出来。 说明：本工程中的KindEditor删掉了上传图片的功能，所以是一个“轻量级”的KindEditor，“重量级”的KindEditor的应用请参考另一个例子。 本工程编码方式：UTF-8。 使用的数据库:MySQL; 数据库创建：CREATE DATABASE `test`; USE `test`; 建表SQL语句：create table `testtable` ( `uuid` char(36) not null comment '主键', `content` blob, primary key (`uuid`) ) engine=innodb default charset=utf8;
kindeditor整合struts2 并且增加删除图片功能
01-11
kindeditor整合struts2 增加删除图片功能
ASP.NET MVC5网站开发修改及删除文章（十）
10-23
- 在BLL层的BaseRepository类中，有默认的Delete方法，但这个方法不会处理外键删除问题，因此在CommonModelRepository中重写Delete方法，实现了删除附件并保存更改的功能。 - 如果希望调用基类的Delete方法，则可...
ASPNET MVC+EasyUI后台项目源码
03-17
使用vs2012 +mvc4+easyui开发 基本功能齐全 也适合做网站后端开发的初学者 NET版本是.net FrameWork 4.5 使用了MVC的code first创建，自动生成数据库，和表的增，删，改，查。 包含Excel导入用户以及批量删除 添加...
ASP.NET MVC5基础Demo：简单管理系统开发与架构
本文档介绍了ASP.NET MVC5网站开发的基本概念和开发过程，作者在年底利用自由时间重启了一个简单的项目，旨在实现基本的网站管理功能，如添加和修改栏目，用户登录后管理文章，管理员登录后修改网站设置。...
SpringMVC整合KindEditor，实现图片上传、预览、删除
DataVault2.0大数据的未来
06-24 4868
之前我写过一篇关于《DWZ（JUI）整合Kindeditor应用于dialog弹出框》，只是讨论了前端的应用，并没有详细介绍后台代码实现。本文除了介绍后台的代码实现，还顺便介绍一些KindEditor的前端应用技巧。以前的是SSH框架实现KindEditor插件的上传、图片空间管理功能。现在的项目底层框架换成了springmvc，代码虽然变化不大，但是需要注意一些细节的实现。 具体后台实现：@Co
解决kindeditor 编辑器完美支持IE11 看不见上传文件框问题 无法保存问题
12-25
1、 解决kindeditor编辑器无法保存 2、 解决kindeditor上传文件框IE11 看不见或者位置不对问题
html编辑器中上传的图片怎么删除呢,kindeditor图片空间添加删除图片功能
weixin_42499790的博客
06-08 766
很久没有写过文章了，这次学习吧改变投入了不少心血，当然也学习到了不少，现在基本稳定，以后尽可能的每天更新文章，致力分享实用的技术。这里是扩展的编辑器的插件，以前一直在用xh编辑器，后来了解到kindeditor后就“深深的”被他吸引了，因为他扩展性太强了，且还开源免费，他自带有单个图片上传和批量图片上传，还有个“图片空间”，图片空间就是在线浏览你以前上传过的图片，点击后可以直接插入到编辑器内，省去...
KindEditor的简单使用，以及上传图片预览图片，用户删除图片后的数据处理（重点），以及 BeautifulSoup，shutil两模块了解...
weixin_30652271的博客
04-14 343
KindEditor的简单了解 http://www.cnblogs.com/wupeiqi/articles/6307554.html 简单使用： <div class="comm"> <form method="POST" enctype="multipart/form-data"> ...
引入flag.php文件,php文件自包含的奇淫技巧
weixin_30072453的博客
03-10 1118
原标题：php文件自包含的奇淫技巧前言刷题的时候刚好看到一个比较厉害的phpinfo的利用姿势，原理不是很懂，题目来自百度杯12月第四场Blog进阶版以下是writeup解题过程注册以后发现了一个编辑器，网上搜索一番，编辑器可以列目录：1http://931088e56a06460eb01b88a21186b77e156bc67ce775433a.changame.ichunqiu.com/kin...
kindeditor 隐藏网络图片功能，只保留本地上传功能，并且将图片进行压缩处理
努力奋进，勇追不止……
11-04 2530
kindeditor 隐藏网络图片功能，只保留本地上传功能，并且将图片进行压缩处理        在使用kindeitor的时候，我们往往在使用图片功能的时候，包含两个部分，网络图片功能和本地上传功能，本文就告诉你如何隐  藏网络图片功能，只保存本地上传功能。     假如你想减轻服务器的，我们还可以在本地上传的时候将图片进行压缩处理，避免图片过大。本文将提供不改变原图片大
php可视化文件上传,Tiny File Manager – 轻便PHP文件管理工具 WEB文件可视化管理文件...
weixin_39931390的博客
03-28 504
Tiny File Manager – 轻便PHP文件管理工具 WEB文件可视化管理文件如果我们在用虚拟主机的时候文件管理器是cPanel面板自带的，但是如果我们用到云服务器，有些WEB服务器面板是自带文件管理器工具的，而有些是没有自带。我们可以使用一些第三方的文件管理器工具来解决有些网友需要的可视化WEB文件管理器工具的功能。比如老部落在之前”NET2FTP安装在线WEB FTP客户端管理工具及...
Ajax的一个关于用户习惯的问题
weixin_34088598的博客
09-28 54
  我们都知道，VS.NET2005的确是比VS.NET2003更加方便，但是有一个问题就是用惯了2003的人在用2005时会感到有些不适应，连一些快捷键都变了。不过，对于我们程序员来说，这算不了什么，反正都是要学习新东西的，这点倒是难不到我们。AJAX也一样，也有一些用户习惯上的问题，我们先来看看AJAX的工作模式跟传统的web工作模式有什么区别，为简单起见，我用就网上copy下来的图片吧~~...
ASP.NET MVC5：利用KindEditor实现文章添加功能
本文档介绍了在ASP.NET MVC5中创建一个网站时，如何添加文章功能，包括使用KindEditor富文本编辑器的过程。以下是详细步骤和关键知识点： 1. **KindEditor富文本编辑器的集成**: - 首先，访问KindEditor官方网站...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值