使用Ueditor編輯器上傳圖片總結；

今天使用Ueditor編輯器上傳圖片一直出問題，在網上找了多種方法，最後總結以下：

Ueditor編輯器是百度開發的編輯器，要在jsp頁面添加Ueditor編輯器，須要如下幾步：

（1）到 http://ueditor.baidu.com/website/download.html 下載jsp版本的，解壓後放到項目webContent目錄下；

（2）將jsp/lib下的五個包添加到WEB-INF/lib下，注意，有不一樣版本包衝突的，刪除本來存在的jar包。

（3）在所要添加的jsp頁面添加如下代碼

 

<script type="text/javascript" charset="utf-8" src="use/edit/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="use/edit/ueditor/ueditor.all.min.js"> </script>
  <!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
  <!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
<script type="text/javascript" charset="utf-8" src="use/edit/ueditor/lang/zh-cn/zh-cn.js"></script>

並在你想放置的編輯器位置添加如下代碼：

<script id="container" name="content" type="text/plain" style="width:480px">這裏就是你要輸入的文本內容</script>
  <!-- 實例化編輯器 -->
 <script type="text/javascript">
  　　 var ue = UE.getEditor('container');
 </script>

到這一步，運行項目，編輯器已經添加成功，能夠進行編輯文字了，以下圖：

當時點擊上傳圖片出現：後端配置項沒有正常加載,上傳插件不能正常使用或者未能找到上傳圖片或上傳失敗

後臺是否報錯：javax.servlet.ServletException: java.lang.NoSuchMethodError；

這時，先檢查jar包是否衝突，通常使用SSH框架都會用到commons-io 和commons-fileUpload這兩個包，而剛添加的jsp/lib下的包也包含這兩個。

接下來就是和Struts2 整合：

　　　添加過濾器，過濾controller.jsp

package com.blog.filter;


import java.io.IOException;    
import javax.servlet.FilterChain;    
import javax.servlet.ServletException;    
import javax.servlet.ServletRequest;    
import javax.servlet.ServletResponse;    
import javax.servlet.http.HttpServletRequest;    
  
import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;  
  
    public class UeditorStrutsFilter extends StrutsPrepareAndExecuteFilter {  
        
        @Override  
        public void doFilter(ServletRequest req, ServletResponse res,  
                FilterChain chain) throws IOException, ServletException {  
            HttpServletRequest request = (HttpServletRequest) req;  
            String url = request.getRequestURI();        
            if (url.contains(request.getContextPath()+"/use/edit/ueditor/jsp/")) {               
                chain.doFilter(req, res);           
            }else{               
                super.doFilter(req, res, chain);           
            }   
        }  
} 

修改web.xml文件：

 <filter>
　　<filter-name>myeditor</filter-name>
　　<filter-class>com.blog.filter.UeditorStrutsFilter</filter-class>
</filter>
<filter-mapping>  
        <filter-name>myeditor</filter-name>  
        <url-pattern>/*</url-pattern>
</filter-mapping>

從新編譯項目，就能夠上傳圖片了。