ueditor百度编辑器去掉图片的在线管理

if ( id == “imgManager” ) {
list.style.display = “”;
//已经初始化过时不再重复提交请求
if ( !list.children.length ) {
ajax.request( editor.options.imageManagerUrl, {
timeout:100000,
action:”get”,
onsuccess:function ( xhr ) {
//去除空格
var tmp = utils.trim(xhr.responseText),
imageUrls = !tmp ? [] : tmp.split( “ue_separate_ue” ),
length = imageUrls.length;
g( “imageList” ).innerHTML = !length ? “  ”+lang.noUploadImage : “”;
for ( var k = 0, ci; ci = imageUrls[k++]; ) {
var img = document.createElement( “img” );
var div = document.createElement( “div” );
div.appendChild( img );
div.style.display = “none”;
g( “imageList” ).appendChild( div );
img.onclick = function () {
changeSelected( this );
};
img.onload = function () {
this.parentNode.style.display = “”;
var w = this.width, h = this.height;
scale( this, 100, 120, 80 );
this.title = lang.toggleSelect + w + “X” + h;
};
img.setAttribute( k < 35 ? “src” : “lazy_src”, editor.options.imageManagerPath + ci.replace(/s+|s+/ig,”") );
img.setAttribute( “data_ue_src”, editor.options.imageManagerPath + ci.replace(/s+|s+/ig,”") );
}
},
onerror:function () {
g( “imageList” ).innerHTML = lang.imageLoadError;
}
} );
}
}

<%@ WebHandler Language="C#" Class="imageManager" %>
/**
 * Created by visual studio2010
 * User: xuheng
 * Date: 12-3-7
 * Time: 下午16:29
 * To change this template use File | Settings | File Templates.
 */
using System;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;

public class imageManager : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
       
       
        string[] paths = { "upload", "upload1" }; //需要遍历的目录列表，最好使用缩略图地址，否则当网速慢时可能会造成严重的延时
        string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" };                //文件允许格式

        string action = context.Server.HtmlEncode(context.Request["action"]);

        if (action == "get")
        {
            String str = String.Empty;
           
            foreach (string path in paths)
            {
                DirectoryInfo info = new DirectoryInfo(context.Server.MapPath(path));

                //目录验证
                if (info.Exists)
                {
                    DirectoryInfo[] infoArr = info.GetDirectories();
                    foreach (DirectoryInfo tmpInfo in infoArr)
                    {
                        foreach (FileInfo fi in tmpInfo.GetFiles())
                        {
                            if (Array.IndexOf(filetype, fi.Extension) != -1)
                            {
                                str += path+"/" + tmpInfo.Name + "/" + fi.Name + "ue_separate_ue";
                            }
                        }
                    }
                }
            }
          
            context.Response.Write(str);
        }

        //Add Start========================================================== 2013-05-12
        //删除选中的文件
        string pathDel = string.Empty;                  //最好使用缩略图地址，否则当网速慢时可能会造成严重的延时
        string fileName = context.Server.HtmlEncode(context.Request["fileName"]);
        bool isDeleted = false;
        if (action == "del")
        {
            try
            {
               
                String fullPath = String.Empty;
                foreach (string path in paths)
                {
                    pathDel = context.Server.MapPath(path);
                    DirectoryInfo info = new DirectoryInfo(pathDel);

                    //目录验证
                    if (info.Exists)
                    {
                        //获得C:...ueditornetupload目录下，以时间命名的目录。如：2013-05-12
                        DirectoryInfo[] infoArr = info.GetDirectories();
                        foreach (DirectoryInfo tmpInfo in infoArr)
                        {
                            foreach (FileInfo fi in tmpInfo.GetFiles())
                            {
                                //判断是否是指定的图片类型，因为长传的附件和图片在同一个目录
                                if (Array.IndexOf(filetype, fi.Extension) != -1)
                                {
                                    if (fi.Name.Equals(fileName))
                                    {
                                        fullPath = pathDel + "/" + tmpInfo.Name + "/"+ fileName;
                                        File.Delete(fullPath);
                                        isDeleted = true;
                                        break;
                                    }
                                }
                            }
                            //已经删除，往外跳出
                            if (isDeleted == true)
                                break;
                        }
                    }
                    //已经删除，往外跳出
                    if (isDeleted == true)
                        break;
                }
                isDeleted = false;
                context.Response.Write("success");
            }
            catch
            {
                context.Response.Write("error");
            }
        }
        //Add End============================================================  2013-05-12
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

/**
 * Created by JetBrains PhpStorm.
 * User: taoqili
 * Date: 12-01-08
 * Time: 下午2:52
 * To change this template use File | Settings | File Templates.
 */
var imageUploader = {},
    flashObj = null,
    postConfig=[];
(function () {
    var g = $G,
        ajax = parent.baidu.editor.ajax,
        maskIframe = g("maskIframe"); //tab遮罩层,用来解决flash和其他dom元素的z-index层级不一致问题
       // flashObj;                   //flash上传对象

    var flagImg = null, flashContainer;
    imageUploader.init = function (opt, callbacks) {
        switchTab("imageTab");
        createAlignButton(["remoteFloat", "localFloat"]);
        createFlash(opt, callbacks);
        var srcImg = editor.selection.getRange().getClosedNode();
        if (srcImg) {
            showImageInfo(srcImg);
            showPreviewImage(srcImg, true);
            var tabElements = g("imageTab").children,
                tabHeads = tabElements[0].children,
                tabBodys = tabElements[1].children;
            for (var i = 0, ci; ci = tabHeads[i++];) {
                if (ci.getAttribute("tabSrc") == "remote") {
                    clickHandler(tabHeads, tabBodys, ci);
                }
            }

        }
        addUrlChangeListener();
        addOKListener();
        addScrollListener();
        addSearchListener();
        $focus(g("url"));
    };
    imageUploader.setPostParams = function(obj,index){
        if(index===undefined){
            utils.each(postConfig,function(config){
                config.data = obj;
            })
        }else{
            postConfig[index].data = obj;
        }
    };

    function insertImage(imgObjs) {
        editor.fireEvent('beforeInsertImage', imgObjs);
        editor.execCommand("insertImage", imgObjs);
    }

    function searchImage() {
        var imgSearchInput = $G("imgSearchTxt");
        if (!imgSearchInput.getAttribute("hasClick") || !imgSearchInput.value) {
            selectTxt(imgSearchInput);
            return;
        }
        g("searchList").innerHTML = "

" + lang.imageLoading + "

" + lang.tryAgain + "

            }
            g("searchList").innerHTML = "";
            g("searchList").appendChild(frg);
        };
        baidu.sio.callByServer(url, reqCallBack, {charset:"GB18030"});
    }

    function selectTxt(node) {
        if (node.select) {
            node.select();
        } else {
            var r = node.createTextRange && node.createTextRange();
            r.select();
        }
    }

    function addSearchListener() {
        g("imgSearchTxt").onclick = function () {
            selectTxt(this);
            this.setAttribute("hasClick", true);
            if (this.value == lang.searchInitInfo) {
                this.value = "";
            }
        };
        g("imgSearchTxt").onkeyup = function () {
            this.setAttribute("hasClick", true);
            //只触发一次
            this.onkeyup = null;
        };

        g("imgSearchBtn").onclick = function () {
            searchImage();
        };
        g("imgSearchReset").onclick = function () {
            var txt = g("imgSearchTxt");
            txt.value = "";
            txt.focus();
            g("searchList").innerHTML = "";
        };
        g("imgType").onchange = function () {
            searchImage();
        };
        domUtils.on(g("imgSearchTxt"), "keyup", function (evt) {
            if (evt.keyCode == 13) {
                searchImage();
            }
        })

    }

    /**
     * 延迟加载
     */
    function addScrollListener() {

        g("imageList").onscroll = function () {
            var imgs = this.getElementsByTagName("img"),
                top = Math.ceil(this.scrollTop / 100) - 1;
            top = top < 0 ? 0 : top;
            for (var i = top * 5; i < (top + 5) * 5; i++) {
                var img = imgs[i];
                if (img && !img.getAttribute("src")) {
                    img.src = img.getAttribute("lazy_src");
                    img.removeAttribute("lazy_src");
                }
            }
        }
    }

    /**
     * 绑定确认按钮
     */
    function addOKListener() {
        dialog.onok = function () {
            var currentTab = findFocus("tabHeads", "tabSrc");
            switch (currentTab) {
                case "remote":
                    return insertSingle();
                    break;
                case "local":
                    return insertBatch();
                    break;
                case "imgManager":
                    return insertSearch("imageList");
                    break;
                case "imgSearch":
                    return insertSearch("searchList", true);
                    break;
            }
        };
        dialog.oncancel = function () {
            hideFlash();
        }
    }

    function hideFlash() {
        flashObj = null;
        flashContainer.innerHTML = "";
    }

    /**
     * 将元素id下的所有图片文件插入到编辑器中。
     * @param id
     * @param catchRemote  是否需要替换远程图片
     */
    function insertSearch(id, catchRemote) {
        var imgs = $G(id).getElementsByTagName("img"), imgObjs = [];
        for (var i = 0, ci; ci = imgs[i++];) {
            if (ci.getAttribute("selected")) {
                var url = ci.getAttribute("src", 2).replace(/(s*$)/g, ""), img = {};
                img.src = url;
                img.data_ue_src = url;
                imgObjs.push(img);
            }
        }
        insertImage(imgObjs);
        catchRemote && editor.fireEvent("catchRemoteImage");
        hideFlash();
    }

    /**
     * 插入单张图片
     */
    function insertSingle() {
        var url = g("url"),
            width"),
            height"),
            border = g("border"),
            vhSpace = g("vhSpace"),
            title = g("title"),
            align = findFocus("remoteFloat", "name"),
            imgObj = {};
        if (!url.value) return;
        if (!flagImg) return;   //粘贴地址后如果没有生成对应的预览图，可以认为本次粘贴地址失败
        if (!checkNum([width, height, border, vhSpace])) return false;
        imgObj.src = url.value;
        imgObj.data_ue_src = url.value;
        imgObj.width = width.value;
        imgObj.height = height.value;
        imgObj.border = border.value;
        imgObj.floatStyle = align;
        imgObj.vspace = imgObj.hspace = vhSpace.value;
        imgObj.title = title.value;
        imgObj.style = "width:" + width.value + "px;height:" + height.value + "px;";
        insertImage(imgObj);
        editor.fireEvent("catchRemoteImage");
        hideFlash();
    }

    /**
     * 检测传入的所有input框中输入的长宽是否是正数
     * @param nodes input框集合，
     */
    function checkNum(nodes) {
        for (var i = 0, ci; ci = nodes[i++];) {
            if (!isNumber(ci.value) || ci.value < 0) {
                alert(lang.numError);
                ci.value = "";
                ci.focus();
                return false;
            }
        }
        return true;
    }

    /**
     * 数字判断
     * @param value
     */
    function isNumber(value) {
        return /(0|^[1-9]d*$)/.test(value);
    }

    /**
     * 插入多张图片
     */
    function insertBatch() {
        if (imageUrls.length < 1) return;
        var imgObjs = [],
            align = findFocus("localFloat", "name");

        for (var i = 0, ci; ci = imageUrls[i++];) {
            var tmpObj = {};
            tmpObj.title = ci.title;
            tmpObj.floatStyle = align;
            //修正显示时候的地址数据,如果后台返回的是图片的绝对地址，那么此处无需修正
            tmpObj.data_ue_src = tmpObj.src = editor.options.imagePath + ci.url;
            imgObjs.push(tmpObj);
        }
        insertImage(imgObjs);
        hideFlash();
    }

    /**
     * 找到id下具有focus类的节点并返回该节点下的某个属性
     * @param id
     * @param returnProperty
     */
    function findFocus(id, returnProperty) {
        var tabs = g(id).children,
            property;
        for (var i = 0, ci; ci = tabs[i++];) {
            if (ci.className == "focus") {
                property = ci.getAttribute(returnProperty);
                break;
            }
        }
        return property;
    }

    /**
     * 绑定地址框改变事件
     */
    function addUrlChangeListener() {
        var value = g("url").value;
        if (browser.ie) {
            g("url").onpropertychange = function () {
                var v = this.value;
                if (v != value) {
                    createPreviewImage(v);
                    value = v;
                }
            };
        } else {
            g("url").addEventListener("input", function () {
                var v = this.value;
                if (v != value) {
                    createPreviewImage(v);
                    value = v;
                }
            }, false);
        }
    }

    /**
     * 绑定图片等比缩放事件
     * @param percent  缩放比例
     */
    function addSizeChangeListener(percent) {
        var width"),
            height"),
            lock = g('lock');
        width.onkeyup = function () {
            if (!isNaN(this.value) && lock.checked) {
                height.value = Math.round(this.value / percent) || this.value;
            }
        };
        height.onkeyup = function () {
            if (!isNaN(this.value) && lock.checked) {
                width.value = Math.round(this.value * percent) || this.value;
            }
        }
    }

    /**
     * 依据url中的地址创建一个预览图片并将对应的信息填入信息框和预览框
     */
    function createPreviewImage(url) {
        if (!url) {
            flagImg = null;
            g("preview").innerHTML = "";
            g("width").value = "";
            g("height").value = "";
            g("border").value = "";
            g("vhSpace").value = "";
            g("title").value = "";
            $focus(g("url"));
            return;
        }
        var img = document.createElement("img"),
            preview = g("preview");

        var imgTypeReg = /.(png|gif|jpg|jpeg)$/gi, //格式过滤
            urlFilter = "";                                     //地址过滤
        if (!imgTypeReg.test(url) || url.indexOf(urlFilter) == -1) {
            preview.innerHTML = "" + lang.imageUrlError + "";
            flagImg = null;
            return;
        }
        preview.innerHTML = lang.imageLoading;
        img.onload = function () {
            flagImg = this;
            showImageInfo(this);
            showPreviewImage(this,true);
            this.onload = null;
        };
        img.onerror = function () {
            preview.innerHTML = "" + lang.imageLoadError + "";
            flagImg = null;
            this.onerror = null;
        };
        img.src = url;
    }

    /**
     * 显示图片对象的信息
     * @param img
     */
    function showImageInfo(img) {
        if (!img.getAttribute("src") || !img.src) return;
        var wordImgFlag = img.getAttribute("word_img");
        g("url").value = wordImgFlag ? wordImgFlag.replace("&", "&") : (img.getAttribute('data_ue_src') || img.getAttribute("src", 2).replace("&", "&"));
        g("width").value = img.width || 0;
        g("height").value = img.height || 0;
        g("border").value = img.getAttribute("border") || 0;
        g("vhSpace").value = img.getAttribute("vspace") || 0;
        g("title").value = img.title || "";
        var align = editor.queryCommandValue("imageFloat") || "none";
        updateAlignButton(align);

        //保存原始比例，用于等比缩放
        var percent = (img.width / img.height).toFixed(2);
        addSizeChangeListener(percent);
    }

    /**
     * 将img显示在预览框，
     * @param img
     * @param needClone  是否需要克隆后显示
     */
    function showPreviewImage(img, needClone) {
        var tmpWidth = img.width, tmpHeight = img.height;
        var max,max,
            target = scaling(tmpWidth,tmpHeight,maxWidth,maxHeight);
        target.border = img.border||0;
        target.src = img.src;
        flagImg = true;
        if ((target.width + 2 * target.border) > maxWidth) {
            target.width = maxWidth - 2 * target.border;
        }
        if ((target.height + 2 * target.border) > maxWidth) {
            target.height = maxWidth - 2 * target.border;
        }
        var preview = g("preview");
        preview.innerHTML = '';
    }

    /**
     * 图片缩放
     * @param img
     * @param max
     */
    function scale(img, max, oWidth, oHeight) {
        var , , percent, ow = img.width || oWidth, oh = img.height || oHeight;
        if (ow > max || oh > max) {
            if (ow >= oh) {
                if (width = ow - max) {
                    percent = (width / ow).toFixed(2);
                    img.height = oh - oh * percent;
                    img.width = max;
                }
            } else {
                if (height = oh - max) {
                    percent = (height / oh).toFixed(2);
                    img.width = ow - ow * percent;
                    img.height = max;
                }
            }
        }
    }

    function scaling(width,height,maxWidth,maxHeight){
        if(width         var srcRatio = (width/height).toFixed(2),
            tarRatio = (maxWidth/maxHeight).toFixed(2),
            w,h;
        if(srcRatio             h = maxHeight;
            w = h*srcRatio;
        }else{
            w = maxWidth;
            h = w/srcRatio;
        }
        return {width:w.toFixed(0),height:h.toFixed(0)}
    }
    /**
     * 创建flash实例
     * @param opt
     * @param callbacks
     */
    function createFlash(opt, callbacks) {
        var i18n = utils.extend({}, lang.flashI18n);
        //处理图片资源地址的编码，补全等问题
        for (var i in i18n) {
            if (!(i in {"lang":1, "uploadingTF":1, "imageTF":1, "textEncoding":1}) && i18n[i]) {
                i18n[i] = encodeURIComponent(editor.options.langPath + editor.options.lang + "/images/" + i18n[i]);
            }
        }
        opt = utils.extend(opt, i18n, false);
        var option = {
            createOptions:{
                id:'flash',
                url:opt.flashUrl,
                width:opt.width,
                height:opt.height,
                errorMessage:lang.flashError,
                wmode:browser.safari ? 'transparent' : 'window',
                ver:'10.0.0',
                vars:opt,
                container:opt.container
            }
        };
        flashContainer = $G(opt.container);
        option = utils.extend(option, callbacks, false);
        flashObj = new baidu.flash.imageUploader(option);
    }

    /**
     * 依据传入的align值更新按钮信息
     * @param align
     */
    function updateAlignButton(align) {
        var aligns = g("remoteFloat").children;
        for (var i = 0, ci; ci = aligns[i++];) {
            if (ci.getAttribute("name") == align) {
                if (ci.className != "focus") {
                    ci.className = "focus";
                }
            } else {
                if (ci.className == "focus") {
                    ci.className = "";
                }
            }
        }
    }

    /**
     * 创建图片浮动选择按钮
     * @param ids
     */
    function createAlignButton(ids) {
        for (var i = 0, ci; ci = ids[i++];) {
            var floatContainer = g(ci),
                nameMaps = {"none":lang.floatDefault, "left":lang.floatLeft, "right":lang.floatRight, "center":lang.floatCenter};
            for (var j in nameMaps) {
                var div = document.createElement("div");
                div.setAttribute("name", j);
                if (j == "none") div.className = "focus";

                div.style.cssText = "background:url(images/" + j + "_focus.jpg);";
                div.setAttribute("title", nameMaps[j]);
                floatContainer.appendChild(div);
            }
            switchSelect(ci);
        }
    }

    function toggleFlash(show) {
        if (flashContainer && browser.webkit) {
            flashContainer.style.left = show ? "0" : "-10000px";
        }
    }

    /**
     * tab点击处理事件
     * @param tabHeads
     * @param tabBodys
     * @param obj
     */
    function clickHandler(tabHeads, tabBodys, obj) {
        //head样式更改
        for (var k = 0, len = tabHeads.length; k

• 上一个： wordpress 伪静态规则与配置方法详解

• 下一个： jquery失去焦点与获取焦点事件blur() focus()