ueditor單獨呼叫圖片上傳
阿新 • • 發佈:2019-02-19
很多人在問ueditor,如何單獨使用圖片上傳功能,但是網上沒有一篇能用的文件,沒辦法,我剛好也需要這個功能,花了3天時間(本人水平太菜,哎)終於知道怎麼處理了,發出來給大家共享:
效果如下:
頁面效果:
點選上傳圖片:
上傳圖片,點確定:
獲得上傳圖片的路徑,並賦值給input:
Ok,效果就這樣。
具體實現也非常簡單:
JS程式碼:注意放在頁面的最下面,頁面需要載入ueditor必備的2個js,放在頁面的頭部:
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,搞定,非常簡單。