百度編輯器編輯文章

利用百度編輯器實現文章的編寫，實現效果如下：

可以看到利用百度編輯可以很好的實現文字的排版效果，同時還可以多圖上傳以及新增錨點和上傳視屏。

配置的一些關鍵點：

• 當從官方文件中下載了相關的js和原始碼新增到myeclipse中的時候是會出現紅叉叉的，但是不影響使用。可以通過右鍵資料夾 –> Myeclipse –> Enclude From Validation/Run Validation 消除

• 上傳圖片的時候需要修改ueditor中 –> jsp –> config.json可以看到有圖片配置說明，需要修改的是 “imageUrlPrefix”（11行） 設定成該web-project的目錄下，我的web名字為City,同時可以修改圖片上傳的大小，圖片的格式

• 除此之外，還需要自己配置攔截器(用於圖片的上傳)

<!-- 定義使用了自己的過濾器  目的是編輯器的上傳圖片 -->
    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>com.Filter.Filter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>struts2</filter-name
 
>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

// 編寫自己的過濾方法 
public class Filter extends StrutsPrepareAndExecuteFilter {

     public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {    
            HttpServletRequest request = (HttpServletRequest) req;
          //  HttpServletResponse response = (HttpServletResponse) res;
 


            request.setCharacterEncoding("utf-8");


            String url = request.getRequestURI();  
             // 這是專案的路徑 專案名字到百度編輯器control.jsp頁面路徑  
            if ("/City/ueditor/jsp/controller.jsp".equals(url)) {     
                chain.doFilter(req, res);    
            }
            else if(url.equals("/City/null")){

            }
            else{    
                super.doFilter(req, res, chain);    
            }    
        } 
}

• 還有一個上傳視屏的問題會出現：當上傳視屏後，如果百度編輯器失去了焦點，當焦點再次回到編輯器的時候，上傳的視屏的邊框會消失，修改如下：ueditor.config.js的403行附近，替換img

* img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass','style', 'class', '_url', 'anchorname'] 

        這是百度編輯器的的一個的一個bug

• 百度編輯器上傳圖片慢的問題：
  找到 ueditor/dialogs/image/images.js 將

accept: {
  title: 'Images',
  extensions: 'jpg,jpeg,png',
  mimeTypes: 'image/*'}

        修改為

accept: {
  title: 'Images',
  extensions: 'jpg,jpeg,png',
  mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif'   
}