改造ueditor 在线图片功能 添加 删除 功能

 var imgPath = "";
    /* 在线图片 */
    function OnlineImage(target) {
        this.container = utils.isString(target) ? document.getElementById(target) : target;
        this.init();
    }
    OnlineImage.prototype = {
        init: function () {
            this.reset();
            this.initEvents();
        },
        /* 初始化容器 */
        initContainer: function () {
            this.container.innerHTML = '';
            this.list = document.createElement('ul');
            this.clearFloat = document.createElement('li');

            domUtils.addClass(this.list, 'list');
            domUtils.addClass(this.clearFloat, 'clearFloat');

            this.list.appendChild(this.clearFloat);
            this.container.appendChild(this.list);
        },
        /* 初始化滚动事件,滚动到地步自动拉取数据 */
        initEvents: function () {
            var _this = this;

            /* 滚动拉取图片 */
            domUtils.on($G('imageList'), 'scroll', function(e){
                var panel = this;
                if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
                    _this.getImageData();
                }
            });
            /* 点击搜索按钮 */
            domUtils.on($G('sub'), 'click', function () {
                var key = $G('sel').value;
                if (key && key != lang.sel) {
                    _this.reset()
                    _this.getImageData();
                }
            });
            /* 点击缩略图按妞 */
            domUtils.on($G('clo'), 'click', function () {
                var src ="";
                $(".selected>img").each(function (i,v) {
                    src += "srcs=" + v.src.substr(v.src.lastIndexOf('/Picasa')) + "&";
                })
                src = src.substring(0, src.length - 1);
                $.ajax({
                    url: '/Attachment/Thumbnail',
                    data: src,
                    type:'post',
                    success: function (data) {
                    alert(data.Message);
                    }
                    });
          
                });
           
            /* 搜索框聚焦 */
            domUtils.on($G('sel'), 'focus', function () {
                 key = $G('sel').value;
                if (key && key == lang.sel) {
                    $G('sel').value = '';
                }
            });
            /* 搜索框回车键搜索 */
            domUtils.on($G('sel'), 'keydown', function (e) {
                var keyCode = e.keyCode || e.which;
                if (keyCode == 13) {
                    $G('sub').click();
                }
            });
            /*新建文件夹*/
            domUtils.on($G('newfolder'), 'click', function () {
                var index =layer.prompt({
                    title: '新建文件夹',
                    formType: 0//prompt风格，支持0-2
                }, function (tex) {
                    $.ajax({
                        url: "/Picasa/controller.ashx?action=newfolder", data: { "url": tex, "getpath": $("#getpath").val() }, success: function (data) {
                            alert(data.state);
                            if (data.state = "新建成功") {
                                layer.close(index);
                            }
                            _this.reset()
                            _this.getImageData();
                           }

                    });
                });
            });
            uploader.on('fileQueued', function (file,data) {
                uploader.options.formData.url = $("#getpath").val();
                uploader.upload();
                uploader.on('uploadSuccess', function (file, data) {
                    alert(data.state);
                    if (data.state = "添加图片成功") {
                        _this.reset();
                        _this.getImageData();
                    }
                });
              
            
            })
            /*返回上级*/
            domUtils.on($G('back'), 'click', function (e) {
                imgPath = $("#getpath").val().substr(0, $("#getpath").val().lastIndexOf('/'));
                $("#getpath").val(imgPath);
                _this.reset();
                _this.getImageData();
              
            });
            /* 选中文件 */
            domUtils.on(this.container, 'click', function (e) {
                var target = e.target || e.srcElement,
                    li = target.parentNode;
                var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')),
               isJsonp = utils.isCrossDomainUrl(url);
                imgPath = $(li.innerHTML).attr("_src");
                if (imgPath.indexOf('.') == -1) {
                    ajax.request(url, {
                        'dataType': isJsonp ? 'jsonp':'',
                        'data': utils.extend({
                            imgPath: imgPath,
                            seek:"",
                            start: this.listIndex,
                            size: this.listSize
                        }),
                        'method': 'get'
                    });
                    imgPath = imgPath.replace("/Picasa/upload/image", "");
                    $("#getpath").val(imgPath);
                    _this.reset()
                    _this.getImageData();
                }
                if (li.tagName.toLowerCase() == 'li') {
                    if (domUtils.hasClass(li, 'selected')) {
                        domUtils.removeClasses(li, 'selected');
                    } else {
                        domUtils.addClass(li, 'selected');
                    }
                }
            });
        },
        /* 初始化第一次的数据 */
        initData: function () {

            /* 拉取数据需要使用的值 */
            this.state = 0;
            this.listSize = editor.getOpt('imageManagerListSize');
            this.listIndex = 0;
            this.listEnd = false;

            /* 第一次拉取数据 */
            this.getImageData();
        },
        /* 重置界面 */
        reset: function() {
            this.initContainer();
            this.initData();
        },
        /* 向后台拉取图片列表数据 */
        getImageData: function () {
            var _this = this;

            if(!_this.listEnd && !this.isLoadingData) {
                this.isLoadingData = true;
                var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')),
                    isJsonp = utils.isCrossDomainUrl(url);
                ajax.request(url, {
                    'timeout': 100000,
                    'dataType': isJsonp ? 'jsonp':'',
                    'data': utils.extend({
                            imgPath: imgPath,
                            seek: $G('sel').value, 
                            start: this.listIndex,
                            size: this.listSize
                        }, editor.queryCommandValue('serverparam')),
                    'method': 'get',
                    'onsuccess': function (r) {
                        try {
                            var json = isJsonp ? r:eval('(' + r.responseText + ')');
                            if (json.state == 'SUCCESS') {
                                _this.pushData(json.list);
                                _this.listIndex = parseInt(json.start) + parseInt(json.list.length);
                                if(_this.listIndex >= json.total) {
                                    _this.listEnd = true;
                                }
                                _this.isLoadingData = false;
                            }
                        } catch (e) {
                            if(r.responseText.indexOf('ue_separate_ue') != -1) {
                                var list = r.responseText.split(r.responseText);
                                _this.pushData(list);
                                _this.listIndex = parseInt(list.length);
                                _this.listEnd = true;
                                _this.isLoadingData = false;
                            }
                        }
                    },
                    'onerror': function () {
                        _this.isLoadingData = false;
                    }
                });
            }
        },
        /* 添加图片到列表界面上 */
        pushData: function (list) {
            var i, item, img, btns, 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');

                    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.indexOf('.') == -1 ? 'upload/folder-64.gif' : list[i].url));
                    img.setAttribute('_src', urlPrefix + list[i].url);
                    icon.setAttribute('title',list[i].url.substr(list[i].url.lastIndexOf('/') + 1));
                    domUtils.addClass(icon, 'icon');
                    item.appendChild(img);
                    item.appendChild(icon);
                    /*添加名称*/
                    item.appendChild($("<div style='position:absolute;text-align: center;top: 113px;left: 0px;width: 113px;background-color: white;'>" + list[i].url.substr(list[i].url.lastIndexOf('/') + 1) + "</div>")[0]);
                    /* 添加删除功能 */
                    item.appendChild($("<span class='delbtn' url='" + list[i].url + "'>✖</span>").click(function () {
                        var del = $(this);
                        try {
                            window.event.cancelBubble = true; //停止冒泡
                            window.event.returnValue = false; //阻止事件的默认行为
                            window.event.preventDefault();    //取消事件的默认行为  
                            window.event.stopPropagation();   //阻止事件的传播
                        } finally {
                            if (!confirm("确定要删除吗？")) return;
                            $.post(editor.getOpt("serverUrl") + "?action=deleteimage", { "path": del.attr("url") }, function (data) {
                                if (data.state == "ok") del.parent().remove();
                                else alert(data);
                            });
                        }
                    })[0]);
                    
                    this.list.insertBefore(item, this.clearFloat);
                }
            }
        },
        /* 改变图片大小 */
        scale: function (img, w, h, type) {
            var ow = img.width,
                oh = img.height;

            if (type == 'justify') {
                if (ow >= oh) {
                    img.width = w;
                    img.height = h * oh / ow;
                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
                } else {
                    img.width = w * ow / oh;
                    img.height = h;
                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
                }
            } else {
                if (ow >= oh) {
                    img.width = w * ow / oh;
                    img.height = h;
                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
                } else {
                    img.width = w;
                    img.height = h * oh / ow;
                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
                }
            }
        },
        getInsertList: function () {
            var i, lis = this.list.children, list = [], align = getAlign();
            for (i = 0; i < lis.length; i++) {
                if (domUtils.hasClass(lis[i], 'selected')) {
                    var img = lis[i].firstChild,
                        src = img.getAttribute('_src');
                    list.push({
                        src: src,
                        _src: src,
                        alt: src.substr(src.lastIndexOf('/') + 1),
                        floatStyle: align
                    });
                }

            }
            return list;
        }
    };