uedtor图片上传

最新推荐文章于 2022-09-15 15:13:09 发布

xiaowan206

最新推荐文章于 2022-09-15 15:13:09 发布

阅读量256

点赞数

分类专栏： js

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

出于兴趣爱好，前段时间自己尝试写了一个叫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>