ueditor(1.4.3.2)提取单图上传功能

参照网络上流行的提取单图上传功能的方法并加以修改，主要通过创建提取的通用上传图片的js文件（custom.js）和简单修改UEditor的ueditor.all.js文件。

1）在自定义js custom.js中添加方法

var _editor = UE.getEditor('editor_img', {toolbars: [['simpleupload']]});
_editor.ready(function () {
    //设置编辑器不可用
    //_editor.setDisabled();  这个地方要注意 一定要屏蔽
    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
    //_editor.hide();
    //侦听图片上传
    _editor.addListener('contentChange', function (editor) {
        //获取编辑器中的内容（html 代码）
        var img = UE.getEditor('editor_img').getPlainTxt();
        if (img.replace(/[
]/g, "") != "") {
            //判断是否是单图片上传，如果是单传不做任何处理，等待回调函数再次调用。
            if (img.indexOf("loadingclass") == -1) {
                //清空编辑器中的内容，以便下一次添加图片。
                UE.getEditor('editor_img').execCommand('cleardoc');
                //调用callbackImg获取懂图片名称
                if (typeof callbackImg === "function") {
                    eval("callbackImg('" + $(img).attr("src") + "')");
                }
            }
        }
    });
});
//单传图片开始上传,显示等待。
function preUploadSingleImg() {
    if ($("#loading").length > 0) {
        $("#loading").html("<img style='margin:38px auto;' src='lib/ueditor/themes/default/images/loading.gif'>");
    }
}
//单传图片回调,然后清理内容,在清理内容会自动调用contentChange事件，然后再获取上传文件的文件名。
function uploadSingleImgCallback() {
    UE.getEditor('editor_img').execCommand('cleardoc');
}
//上传完成后返回图片地址
function callbackImg(imgSrc) {
    $("#loading").html('<img style="height: 100px; 100px;" src="' + imgSrc + '"/>');
}
//上传点击事件
function uploadImg() {
    var file = $($("iframe").get(0).contentWindow.document).find("input").get(0);
    file.onchange = function () {};
    //判断浏览器是否是IE
    if (document.all) {
        file.click();
    } else {
        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", true, true);
        file.dispatchEvent(evt);
    }
}

2）修改ueditor.all.js源码，找到上传开始和上传完成的事件，在24466行和24488行分别调用js方法preUploadSingleImg()和uploadSingleImgCallback()。

if (typeof preUploadSingleImg === "function") {
     preUploadSingleImg();
}
function callback(){
   try{
       var link, json, loader,
       body = (iframe.contentDocument || iframe.contentWindow.document).body,
       result = body.innerText || body.textContent || '';
       json = (new Function("return " + result))();
       link = me.options.imageUrlPrefix + json.url;
       if(json.state == 'SUCCESS' && json.url) {
           loader = me.document.getElementById(loadingId);
           loader.setAttribute('src', link);
           loader.setAttribute('_src', link);
           loader.setAttribute('title', json.title || '');
           loader.setAttribute('alt', json.original || '');
           loader.removeAttribute('id');
           domUtils.removeClasses(loader, 'loadingclass');
       } else {
           showErrorLoader && showErrorLoader(json.state);
       }
       //单独提取上传回调函数。
        if (typeof uploadSingleImgCallback === 'function') {
           uploadSingleImgCallback();
       }
   }catch(er){
       showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
   }
   form.reset();
   domUtils.un(iframe, 'load', callback);
}

3）前台页面代码。

上传头像示例：<br>
<div id="editor_img" style="display: none;"></div>
<div id="loading" style="height: 100px; 100px;cursor:pointer;float:left;border:1px solid #000;text-align: center;" onclick="uploadImg()"></div>
<script type="text/javascript" src="./lib/ueditor/custom.js"></script>