.NET下为百度文本编辑器UEditor增加图片删除功能

[摘要：比来写了个项目,用到了UEditor,但是UE并出有文件删除功效 然后网上找若何增加 找半天只能找到一个1.2.X的 以是便摹仿PHP的 改成了.NET的 PHP本文 第一步 (增加背景删除地点)]

最近写了个项目,用到了UEditor,然而UE并没有文件删除功能 然后网上找如何添加 找半天只能找到一个1.2.X的

所以就模仿PHP的 改成了.NET的

PHP原文

第一步 (添加后台删除地址)

打开 ueditor/net/config.json

添加参数

/* 上传图片配置项 */
'imageDelUrl' : '/Admin/Home/DelPic', //在线图片管理删除操作请求url //这一行是添加的
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */

第二步 增加js删除方法

放到ueditor/dialogs/image/image.html里面

//新增在线管理删除图片
function uedel(path, id){
if(confirm('您确定要删除它吗？删除后不可恢复！')){
var url = editor.getOpt('imageDelUrl');   //重点是这句话 这句话可以将第一步添加的参数提取出来
$.post(url,{'path':path},function(data){
if (data.state == 'success') {
alert(data.message);
$("#"+id).parent("li").remove();
}else{
alert(data.message);
}
},'json');
}
}

第三步：

修改ueditor/dialogs/image/image.js文件（大约902行）

/* 添加图片到列表界面上 */
pushData: function (list) {
var i, item, img, icon, _this = this,
urlPrefix = editor.getOpt('imageManagerUrlPrefix');
for (i = 0; i < list.length; i++) {
if(list[i] && list[i].url) {
item = document.createElement('li');
img = document.createElement('img');
icon = document.createElement('span');

//开始
del = document.createElement('a');
del.innerHTML = '删除';
domUtils.addClass(del, 'del');
var delid = 'imagelist_' + i;
del.setAttribute('id', delid);
del.setAttribute('href', 'javascript:;');
del.setAttribute('onclick', 'uedel("' + list[i].url + '","' + delid + '")');
//结束

domUtils.on(img, 'load', (function(image){
return function(){
_this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
}
})(img));
img.width = 113;
img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) );
img.setAttribute('_src', urlPrefix + list[i].url);
domUtils.addClass(icon, 'icon');

item.appendChild(img);
item.appendChild(icon);
//Edit
item.appendChild(del); //为了把a标签加载进去
this.list.insertBefore(item, this.clearFloat);
}
}
},

最后 修改样式

编辑 ueditor/dialogs/image/image.css

在末尾添加

/* 新增在线管理删除图片样式*/
#online li a.del {
width: auto;
position: absolute;
top: 0;
right: 0;
color:#F00;
background-color:#DDDDDD;
opacity:0.8;
filter:alpha(80);
border: 0;
z-index:3;
text-align:right;
text-decoration:none;
}

最后贡献Controller

[HttpPost]
public ActionResult DelPic(string path) {
string realPath = Server.MapPath("/Content/ueditor/net/") + path; //这里能文件的真实获取路径
Dictionary<String,String> maps = new Dictionary<string,string>();
bool bl = System.IO.File.Exists(realPath);
if (bl)
{
System.IO.File.Delete(realPath);
maps.Add("state", "success");
maps.Add("message", "删除完成");
return Json(maps);
}
else
{
maps.Add("state", "error");
maps.Add("message", "删除失败");
return Json(maps);
}

}