.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);
            }

        }