在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 <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("");
}
else
return Content("-1");
}
else
return Content("-1");
}
至此,全部改造完成,快刷新看看效果吧!
在MVC3中修改KindEditor实现图片删除的更多相关文章
- 在MVC3中修改KindEditor实现上传图片到指定文件夹
KindEditor编辑器默认上传的图片文件夹,是根据系统时间自动生成的,图片是自动上传到这些文件夹里面,无法选择.如果要上传图片到指定文件夹,像相册一样管理图片,则需要扩展KindEditor编辑器 ...
- 在MVC3或asp.net中修改KindEditor实现上传图片时添加水印
主要修改两个文件:image.js和upload_json.ashx文件. 一.修改image.js文件 打开kindeditor/plugins/image目录下的image.js文件,找到 '&l ...
- kindeditor在Java项目中的应用以及图片上传配置
在官网下载Kindededitor的开发包 在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...
- 备忘:MySQL中修改表中某列的数据类型、删除外键约束
-- MySQL中修改表中某列的数据类型 ALTER TABLE [COLUMN] 表名 MODIFY 列名 列定义; -- 删除外键约束 SHOW CREATE TABLE 表名; -- 复制CON ...
- Asp.net MVC3中全局图片防盗链
怎么样在Asp.Net MVC3中做到全局图片防盗链?如果熟悉Asp.Net的页面生命周期,相信解决这个问题应该很容易.下面就演示一下如何去做? 一.首先是全局的,我们肯定要在Global.asax文 ...
- SQL中CRUD C——create 添加数据 R——read 读取数据 U——update 修改数据 D——delete 删除数据
在SQL server中对数据库的操作: 删除表:drop table 表名修改表:alter table 表名 添加列add 列名 列类型alter table 表名 drop column 列名 ...
- 在Xcode5中修改整个项目名
总会遇到几个项目,在做到一半的时候被要求改项目名,网上找了下相关的资料,大多数是xcode5以前的版本,所以解决好了在这里mark一下,给需要的人. 目标为:将项目名XCD4改成xcd5. 先上结果图 ...
- kindeditor 下图片链接取消边框
在项目中使用了 kindeditor,版本是4.1.10,在发布信息的时候,将图片设置成了超链接,在 IE8 或者其他个别浏览器下会自动的为图片加一个蓝色的边框,效果如下图: 这个蓝框可以通过修改信息 ...
- kindeditor更改图片上传时网络图片的路径
当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是server上的/kindeditor/attached/image ...
随机推荐
- gulp顺序执行任务
gulp的任务的执行是异步的. 所以,当我写完一系列的任务,准备一股脑地执行. # gulp.task('prod', ['clean', 'compass', 'image', 'style', ' ...
- oracle 函数大全及运算符
http://blog.csdn.net/huangwuyi/article/details/7407820 一.函数 1.取整 mod(2,10)=2 2.取整 trunc(12/10)=1 3. ...
- 20145308刘昊阳 《Java程序设计》实验二 Java面向对象程序设计 实验报告
20145308刘昊阳 <Java程序设计>实验二 Java面向对象程序设计 实验报告 实验名称 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面相对象三要素:封 ...
- Leetcode Minimum Path Sum
Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...
- Codeforces Round #243 (Div. 2) A. Sereja and Mugs
#include <iostream> #include <vector> #include <algorithm> #include <numeric> ...
- [BZOJ2790][Poi2012]Distance
2790: [Poi2012]Distance Time Limit: 40 Sec Memory Limit: 128 MBSubmit: 225 Solved: 115[Submit][Sta ...
- UESTC 30 最短路,floyd,水
最短路 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submit Statu ...
- Cento 安装配置FastFDS
unzip -x libfastcommon-master.zip ./make.sh ./make.sh install /usr/include/fastcommon cd FastDFS ./m ...
- Ubuntu root密码修改
安装完Ubuntu后忽然意识到没有设置root密码,不知道密码自然就无法进入根用户下.到网上搜了一下,原来是这麽回事.Ubuntu的默认root密码是随机的,即每次开机都有一个新的root密码.我们可 ...
- Lanterns
Lanterns 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=86640#problem/B 题目: Description ...