ueditor 1.4.3.2 獨立/單獨 上傳圖片框原理

其實簡單的說就是編輯框不少按鈕，全部按鈕的功能都是以command形式提供，因此execCommand就是執行這些功能的命令。
有些按鈕是能彈出顯示一個對話框，他的基類就是dialog，而全部被彈出的dialog框子都在dialogs文件夾中，也就是說邏輯就在那裏面。
咱們上傳圖片完過後會有個確認和取消的按鈕，這個按鈕來自於dialog基類，這個類釐米有個onok就是咱們關注的內容了，點擊肯定了才能將文件插入到編輯框文檔中嘛，因此關注它，在這個代碼邏輯中確實實現了該按鈕的功能，也就是上述的execCommand('inserimage')，而調頭回去看總體代碼all.js中，看到了insertimage功能部分，有兩個事件能夠被咱們用editor.addListener所截獲，一個是beforeinsertimage，一個是afterinsertimage，因此咱們能夠在咱們的代碼中加入這個事件來獲取獲得咱們想要的被上傳的文件地址了。


也就大功告成了！

下面詳情：

 

三、UEditor 1.4.3.2版本單獨（獨立打開上傳圖片窗口）




/**
* Created by Web on 16/3/4.
*/


/*
資源來自:http://blog.csdn.net/yangzhihello/article/details/16975607


使用方法：
我這裏沒寫完，主要講一下代碼原理啊，其實下面代碼已經能夠用了，你能夠再本身改一下吧。
$('你的按鈕').upload(function(list){


});


*/
(function($){
var upload = {
editor:null,
init:function(editorid,callback){
var _editor =this.getEditor(editorid);
_editor.ready(function () {


//_editor.setDisabled(); // 若是使用這個則沒法獲取到事件


_editor.hide();
_editor.addListener('beforeinsertimage', function (t, args) {
//$("#"+keyid).val(args[0].src);
callback(args);
console.log(t)
console.log(args)
alert(args);
});
});
},
getEditor:function(editorid){
this.editor = UE.getEditor(editorid);
return this.editor;
},
show:function(that){
var _editor = this.editor;
//注意這裏只須要獲取編輯器，無需渲染，若是強行渲染，在IE下可能會不兼容（切記）
//和網上一些朋友的代碼不一樣之處就在這裏
$(that).click(function(){
var image = _editor.getDialog("insertimage");
image.render();
image.open();
});
},
render:function(editorid){
var _editor = this.getEditor(editorid);
_editor.render();
}
};


/*
* 事件激發對象
* 存放圖片容器
* */


$.fn.upload = function(callback){


$('#ueditor-upload').size() <= 0 && $('<script id="ueditor-upload" type="text/plain" style="display:none"></script>').appendTo('body');
upload.init("ueditor-upload",callback);
upload.show(this);
}




})(jQuery);




所有解釋：




我先說一下怎麼回事啊，
首先UEditor有個基類叫Dialog，你能夠在ueditor.all.js（該文件將項目全部JS合併到一塊兒了）搜到這個類，
關鍵詞Dialog.prototype或Dialog = baidu.ed都能搜到，行數26809


你看這個基類裏面有個open方法，open確定是打開窗口呀？因此咱們點那個按鈕纔會彈出個框麼，
再看看咱們的上傳圖片的窗口，它實際在你的UEditor下載的包中的dialogs文件夾中的image文件夾
裏面有幾個文件，


其中image.js就是它真實的代碼邏輯了，以前1.3.6之前的版本都是用swfupload，後來用了webuploader（這是我咬牙看github上的各個版本區別的時候發現的）
肯定按鈕的代碼在image.js中的74行，關鍵詞：function initButtons() {


這個onok的方法就是dialog基類中的確認按鈕了，咱們看他幹了什麼。


case 'upload':
list = uploadImage.getInsertList();

var count = uploadImage.getQueueCount();
if (count) {
$('.info', '#queueList').html('<span style="color:red;">' + '還有2個未上傳文件'.replace(/[\d]/, count) + '</span>');
return false;
}
break;


他判斷了個id，由於有4個選項卡麼，什麼插入圖片、上傳圖片、遠程圖片什麼的，咱們關注的是上傳圖片，
因此看了這個case


他在上傳完成後沒有問題的狀況下不return，不然返回false也就上傳失敗了，再往下看


if(list) {
editor.execCommand('insertimage', list);
remote && editor.fireEvent("catchRemoteImage");
}

若是有文件列表的話（上傳成功），那麼就execCommand(insertimage)了，那麼這代碼歷來哪來的？是在ueditor.all.js中的11090行，
關鍵詞：UE.commands['insertimage'] = {




if(me.fireEvent('beforeinsertimage', opt) === true){
return;
}
這裏他有個fireEvent的beforeinsertimage，因此咱們能夠截獲這個事件！


那麼有了上述給出的代碼，



_editor.addListener('beforeinsertimage', function (t, args) {
//$("#"+keyid).val(args[0].src);
callback(args);
console.log(t)
console.log(args)
alert(args);
});

而後咱們就能夠在這裏取出那個列表值，也就是上傳圖片的真實路徑了，那麼我加了個callback，我能夠在本身的頁面DOM中處理完成後的事件了。

 

 

 

 

 

 

 

 

還有點其餘的記錄一下：

 

一、UEditor不用JSP使用Servlet來獲取config.json

首先要弄清楚幾個路徑：
String rootPath = request.getServletContext().getRealPath("/");
response.getWriter().write(new ActionEnter(request, rootPath).exec());

response.getWriter().write(rootPath+request.getContextPath()+request.getRequestURI() );

第一個是rootPath，他指的是你的實際根目錄所在路徑
Mac/Linux : /usr/xxx/yourweb
Windows : c:/users/xxx/yourweb

第二個是你的請求路徑request.getContextPath()，例如/admin/upload
第三個是其它

百度的UEditor獲取config.json是用rootPath（絕對路徑）+你的請求路徑/admin/upload的上一層（代碼中getParnet()了）
【代碼所在ConfigManager.java搜this.parentPath = file.getParent();】

也就是上述的：
/usr/xxx/yourweb/admin/config.json

二、UEditor顯示目錄下全部圖片（上傳圖片中的圖片管理功能）

注意這裏：
FileManager.java搜下面代碼

public FileManager ( Map<String, Object> conf ) {

this.rootPath = (String)conf.get( "rootPath" );
this.dir = this.rootPath + (String)conf.get( "dir" );
this.allowFiles = this.getAllowFiles( conf.get("allowFiles") );
this.count = (Integer)conf.get( "count" );

}

ActionEnter.java搜下面代碼

case ActionMap.LIST_FILE:
conf = configManager.getConfig( actionCode );
int start = this.getStartIndex();
state = new FileManager( conf ).listFile( start );
break;

configManager.java中的

case ActionMap.LIST_FILE:
conf.put( "allowFiles", this.getArray( "fileManagerAllowFiles" ) );
conf.put( "dir", this.jsonConfig.getString( "fileManagerListPath" ) );
conf.put( "count", this.jsonConfig.getInt( "fileManagerListSize" ) );
break;

config.json中的

"fileManagerListPath": "/uploads/files/", /* 指定要列出文件的目錄 */

rootPath是絕對路徑，
dir是由rootPath + dir（來自configManager.java中的從config.json獲取的）拼接到一塊兒的

因此按個人是

/usr/xxx/yourweb/uploads/files/

因此你得保證你的路徑對應的上才能正常訪問！！