增加Ueditor在线管理图片删除功能

第一步: 需要增加一个后端请求删除的url  这样可以在config.json里面增加一项即可  我这里在控制器层初始化了$CONFIG:

   /* 上传图片配置项 */
    "imageDelUrl" : "/SysManage/ueditor/net/DelPic/delpic.ashx", 

 第二步:增加js删除方法,放到ueditor/dialogs/image/image.html里面 :

    <script type="text/javascript">
        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");
            }
        }
    </script>

   第三步: 修改ueditor/dialogs/image/image.js文件(大约905行)

 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+'")');

修改样式,找到 ueditor/dialogs/image/image.css 直接在末尾添加:

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

 第四步:实现删除图片的服务端方法 在/SysManage/ueditor/net/DelPic/ 目录下新建 delpic.ashx 与第一步对应 代码如下

public class delpic : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/json";
        if (context.Request["path"] != null && context.Request["path"] != "")
        {
            string path = context.Request["path"];
            string realPath = context.Server.MapPath("/SysManage/ueditor/net/") + path; //这里能文件的真实获取路径
            System.Collections.Generic.Dictionary<String, String> maps = new System.Collections.Generic.Dictionary<string, string>();
            bool bl = System.IO.File.Exists(realPath);
            if (bl)
            {
                string strjson = "{\"state\":\"success\",\"message\":\"删除完成\"}";
                System.IO.File.Delete(realPath);
                context.Response.Write(strjson);
            }
            else
            {
                string strjson = "{\"state\":\"error\",\"message\":\"删除失败\"}";
                context.Response.Write(strjson);
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

 

你可能感兴趣的:(增加Ueditor在线管理图片删除功能)