1. 程式人生 > >ueditor單獨呼叫圖片上傳

ueditor單獨呼叫圖片上傳

很多人在問ueditor,如何單獨使用圖片上傳功能,但是網上沒有一篇能用的文件,沒辦法,我剛好也需要這個功能,花了3天時間(本人水平太菜,哎)終於知道怎麼處理了,發出來給大家共享:

效果如下:

頁面效果:


點選上傳圖片:


上傳圖片,點確定:


獲得上傳圖片的路徑,並賦值給input


Ok,效果就這樣。

具體實現也非常簡單:

JS程式碼:注意放在頁面的最下面,頁面需要載入ueditor必備的2js,放在頁面的頭部:

ueditor/editor_all_min.js
ueditor/editor_config_big.js

var myEditorImage;
var d;
function upImage() {    
    d = myEditorImage.getDialog("insertimage");
    d.render();
    d.open();
}

myEditorImage= new UE.ui.Editor();
myEditorImage.render('myEditorImage');
myEditorImage.ready(function(){
	myEditorImage.setDisabled();
	myEditorImage.hide();//隱藏UE框體
	myEditorImage.addListener('beforeInsertImage',function(t, arg){
		alert(arg[0].src);//arg就是上傳圖片的返回值,是個陣列,如果上傳多張圖片,請遍歷該值。
		//把圖片地址賦值給頁面input,我這裡使用了jquery,可以根據自己的寫法賦值,到這裡就很簡單了,會js的都會寫了。
		$("#abccc").attr("value", arg[0].src);
	});
});


呼叫的頁面:

<tr>
	<th>上傳圖片</th>
	<td>
		<input type="text" id="abccc" />
		<input type="button" id="myEditorImagesss" onclick="upImage();" value="上傳圖片"/>
	</td>
</tr>

Ok,搞定,非常簡單。