百度開源富文本編輯器 UEditor配置：圖片上傳和文件上傳獨立使用方法

時間 2019-12-01

標籤百度開源文本編輯器 ueditor 配置圖片上傳文件獨立使用方法简体版

原文原文鏈接

使用UEditor編輯器自帶的插件實現圖片上傳和文件上傳功能，這裏經過配置UEditor單獨使用其內置的第三方插件swfupload來實現圖片和文件的上傳，經過對UEditor配置輕鬆實現圖片批量上傳，文件披批量上傳

第一步：先配置UEditorjavascript

 
       < 
       script  
       src 
       = 
       "ueditor/ueditor.config.js" 
       ></ 
       script 
       > 
      
 
       < 
       script  
       src 
       = 
       "ueditor/ueditor.all.min.js" 
       ></ 
       script 
       > 
      
 
       < 
       script  
       type 
       = 
       "text/javascript" 
       > 
      
 
            
       var editor = UE.getEditor('myEditor', { 
      
 
                
       initialFrameWidth: 800, 
      
 
                
       initialFrameHeight: 300, 
      
 
            
       }); 
      
 
       </ 
       script 
       > 
      

第二步：放置編輯器html

< script type = "text/plain" id = "myEditor" ></ script >

第三步：以上已經把UEditor部署好了，下面實現單獨使用圖片和文件上傳java

 
       <script type= 
       "text/javascript" 
       > 
      
       //從新實例化一個編輯器，防止在上面的editor編輯器中顯示上傳的圖片或者文件 
      
       var  
       _editor = UE.getEditor( 
       'upload_ue' 
       ); 
      
       _editor.ready( 
       function  
       () { 
      
       //設置編輯器不可用 
      
       _editor.setDisabled(); 
      
       //隱藏編輯器，由於不會用到這個編輯器實例，因此要隱藏 
      
       _editor.hide(); 
      
       //偵聽圖片上傳 
      
       _editor.addListener( 
       'beforeInsertImage' 
       ,  
       function  
       (t, arg) { 
      
       //將地址賦值給相應的input 
      
       $( 
       "#picture" 
       ).attr( 
       "value" 
       , arg[0].src); 
      
       //圖片預覽 
      
       $( 
       "#preview" 
       ).attr( 
       "src" 
       , arg[0].src); 
      
       }) 
      
       //偵聽文件上傳 
      
       _editor.addListener( 
       'afterUpfile' 
       ,  
       function  
       (t, arg) { 
      
       $( 
       "#file" 
       ).attr( 
       "value" 
       , _editor.options.filePath + arg[0].url); 
      
       }) 
      
       }); 
      
       //彈出圖片上傳的對話框 
      
       function  
       upImage() { 
      
       var  
       myImage = _editor.getDialog( 
       "insertimage" 
       ); 
      
       myImage.open(); 
      
       } 
      
       //彈出文件上傳的對話框 
      
       function  
       upFiles() { 
      
       var  
       myFiles = _editor.getDialog( 
       "attachment" 
       ); 
      
       myFiles.open(); 
      
       } 
      
       </script>