基于UEditor的单独图片上传JQuery插件实现

//基于UEditor的单独图片上传
(function($){
    //
    $.fn.ueditorUploder = function(options){
        var opts = $.extend({}, $.fn.ueditorUploder.defaults, options);
        return this.each(function(){
            //创建随机数
            var rand = Math.ceil(Math.random() * 1000) * Math.floor(Math.random() * 100);
            //UEditorID
            var editorId = 'upload_images_' +rand + '_ueditor';
            //获取父节点
            $p = $(this).parent();
            if($p){
                //添加到UEdior
                $p.append(renderUEditor(editorId));
                //初始化UEditor
                var editor = UE.getEditor(editorId);
                editor.ready(function(){
                    editor.setDisabled('insertimage');
                    editor.hide();
                    editor.addListener('beforeinsertimage',function(t,args){
                        //
                        imageCallback(options.upload,args[0].src);
                    });
                });
                //绑定点击事件
                $(this).bind("click",function(){
                      var img = editor.getDialog('insertimage');
                      img.render();
                      img.open();
                });
            }
        });
    };
    //绘制UEditor
    function renderUEditor(editorId){
        var $ueditor = $("<div style='display:none;'></div>");
        $ueditor.append("<script id='"+editorId+"' type='text/plain'></script>");
        return $ueditor;
    };
    //获取img的src回调
    function imageCallback(uploadCallback,url){
        if(uploadCallback)uploadCallback(url);
    };
    //
    $.fn.ueditorUploder.defaults = {};
    
})(jQuery);

 

调用方法:

$("#upload_${module_id}"). ueditorUploder({
        upload:function(url){
            $("input[name='imgUrl']").val(url);
            $("input[name='imgUrl']").trigger('change');
        }
    });