教你如何呼叫百度編輯器ueditor的上傳圖片、上傳檔案等模組
阿新 • • 發佈：2018-12-29
出於興趣愛好，前段時間自己嘗試寫了一個叫simple的cms，裡面使用了百度ueditor編輯器，發現它的多圖片上傳模組很不錯，用起來很方便，又可以選擇已經上傳好的圖片。正好我又是個懶人，發現有現成的自己就不想新開發了。於是我就想，是不是可以呼叫這個上傳模板為自己所用呢？
有了這個想法後，我就到網上查閱資料，可惜資料少的可憐，都不能很好解決我的問題。於是覺得還是自己動手豐衣足食，皇天不負苦心人，終於摸索出解決方法，現在分享出來，和自己有同樣想法的小夥伴。
程式碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<html>
<head>
<script src="ueditor/ueditor1.43.config.js"></script>
<script src="ueditor/ueditor1.43.all.min.js"></script>
</head>
<body>
<script type="text/plain" id="j_ueditorupload" style="height:5px;display:none;" ></script>
<script>
//例項化編輯器
var o_ueditorupload = UE.getEditor('j_ueditorupload',
{
autoHeightEnabled:false
});
o_ueditorupload.ready(function ()
{
o_ueditorupload.hide();//隱藏編輯器
//監聽圖片上傳
o_ueditorupload.addListener('beforeInsertImage', function (t,arg)
{
alert('這是圖片地址：'+arg[0].src);
});
/* 檔案上傳監聽
* 需要在ueditor.all.min.js檔案中找到* d.execCommand("insertHtml",l)
* 之後插入d.fireEvent('afterUpfile',b)
*/
o_ueditorupload.addListener('afterUpfile', function (t, arg)
{
alert('這是檔案地址：'+arg[0].url);
});
});
//彈出圖片上傳的對話方塊
function upImage()
{
var myImage = o_ueditorupload.getDialog("insertimage");
myImage.open();
}
//彈出檔案上傳的對話方塊
function upFiles()
{
var myFiles = o_ueditorupload.getDialog("attachment");
myFiles.open();
}
</script>
<button type="button" onClick="upImage()">呼叫上傳圖片模組</button>
<br>
<button type="button" onClick="upFiles()">呼叫上傳檔案模組</button>
</body>
<html>
|
注意：需要在ueditor.all.min.js檔案中找到d.execCommand("insertHtml",l)之後插入d.fireEvent('afterUpfile',b)