教你如何調用百度編輯器ueditor的上傳圖片、上傳文件等模塊


出於興趣愛好,前段時間自己嘗試寫了一個叫simple的cms,里面使用了百度ueditor編輯器,發現它的多圖片上傳模塊很不錯,用起來很方便,又可以選擇已經上傳好的圖片。正好我又是個懶人,發現有現成的自己就不想新開發了。於是我就想,是不是可以調用這個上傳模板為自己所用呢?

有了這個想法后,我就到網上查閱資料,可惜資料少的可憐,都不能很好解決我的問題。於是覺得還是自己動手豐衣足食,皇天不負苦心人,終於摸索出解決方法,現在分享出來,和自己有同樣想法的小伙伴。

代碼如下:

 

<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)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM