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

좋은 웹페이지 즐겨찾기