JAVA 集成 Ueditor 百度富文本編輯器

開發環境：一個簡單的SpringMVC框架中，用百度富文本編輯器 ueditor 實現圖片和文件的上傳

官網地址：http://ueditor.baidu.com/website/

需要使用到的2個文件如下（官網上下載）：
1，ueditor1_4_3_3-utf8-jsp.zip
2，ueditor1_4_3_3-src.zip(源碼包)

SpringMVC框架搭建，我這里就不說了，注意下spring配置靜態資源目錄的時候，如果上傳的圖片是放在根目錄下的話

需要在spring配置文件中加入：

<mvc:resources location="/ueditor/" mapping="/ueditor/**"></mvc:resources><!--這個是圖片目標，是位於根目錄，是在服務器中，而非是assets--->

也可以用另外一種方式，就是在編輯器的配置文件中更改圖片保存的目錄位置；

第一步：把下載下來的2個壓縮文件解 放入到項目中：

解壓會得到一個utf-8-jsp的文件夾，重命名為ueditor方便理解（這個名稱可以隨意：基本工作開發中的資源目錄都是放入assets目錄中，）

解壓源碼包得到的ueditor-1.4.3.3里面有一個jsp目錄，進入C:\Users\92307\Desktop\ueditor-1.4.3.3\jsp\src 下，把com文件夾復制

到項目的java代碼中：結構如下圖所示

第二步：接下來就是配置ueditor到項目中了

1、后台寫一個接收方法，復制下面代碼即可：（可以參考assets/ueditor/jsp/controller.jsp）

/**
     * 百度富文本編輯器：圖片上傳
     * @param request
     * @param response
     */
    @RequestMapping("/upload")
    public void imgUploadByUeditor(HttpServletRequest request, HttpServletResponse response) throws IOException {
        request.setCharacterEncoding( "utf-8" );
        response.setHeader("Content-Type" , "text/html");
        ServletContext application=request.getServletContext();
        String rootPath = application.getRealPath( "/" );
        PrintWriter out = response.getWriter();
        out.write( new ActionEnter( request, rootPath ).exec() );
    }

接下來修改config.json文件的目錄（在ueditor源碼中）

打開項目中src\com\baidu\ueditor\ConfigManager.java  

修改第28行 configFileName="/assets/ueditor/jsp/config.json"

private static final String configFileName = "/assets/ueditor/jsp/config.json";

一般公司都會有自己的項目名，可以在 config.json 中 添加 圖片、文件……上加上 訪問前綴，但如果服務器有幾個，就比較麻煩，

所以推薦使用在configManager.java的initEvn方法中修改：如下所示

private void initEnv () throws FileNotFoundException, IOException {
        File file = new File( this.originalPath );
        if ( !file.isAbsolute() ) {//不是絕對路勁
            file = new File( file.getAbsolutePath() );
        }
        this.parentPath = file.getParent();
        String configContent = this.readFile( this.getConfigPath().replace( "\\", "/" ) );
        try{
            JSONObject jsonConfig = new JSONObject( configContent );
            //下面是手動修改配置文件的前綴
            if(!StringUtils.isEmpty(this.contextPath)){
                jsonConfig.put("imageUrlPrefix",this.contextPath);//圖片
                jsonConfig.put("scrawlUrlPrefix",this.contextPath);//塗鴉
                jsonConfig.put("snapscreenUrlPrefix",this.contextPath);//截圖
                jsonConfig.put("catcherUrlPrefix",this.contextPath);//抓取遠程圖片配置
                jsonConfig.put("videoUrlPrefix",this.contextPath);//上傳視頻配置
                jsonConfig.put("fileUrlPrefix",this.contextPath);//上傳文件
                jsonConfig.put("imageManagerUrlPrefix",this.contextPath);//列出指定目錄下的圖片
                jsonConfig.put("fileManagerUrlPrefix",this.contextPath);//列出指定目錄下的文件
            }
            this.jsonConfig = jsonConfig;
        } catch ( Exception e ) {
            this.jsonConfig = null;
        }
    }

 

后台的配置 弄完了，接下來弄下前端的配置就ok了

第三步：打開assets/ueditor/ueditor.config.js文件

    window.UEDITOR_HOME_URL =ctx+"/assets/ueditor/";
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    /**
     * 配置項主體。注意，此處所有涉及到路徑的配置別遺漏URL變量。
     */
    window.UEDITOR_CONFIG = {

        //為編輯器實例添加一個路徑，這個不能被注釋
        UEDITOR_HOME_URL: URL

        // 服務器統一請求接口路徑
        , serverUrl:  ctx+"/upload"//這個是后台請求的路徑，與上面的action對應，其中的ctx 是在引入富文本編輯器的也沒中定義的，等於var ctx='${pageContext.request.contextPath}'

修改 \assets\ueditor\jsp\config.json 文件

在所有的上傳保存文件路徑中 都加入一個前綴 /assets  如下圖所示：

 

第三步;其實就是刪除多余的文件，比如ueditor.jar可以刪除，因為我們導入了源碼，然后*min.js都可以刪除，controller.jsp 也到刪除掉，index.html可以保留
方便今后查看編輯器的構造函數

第四步;頁面引入百度富文本編輯器方法:

<script>
    var ctx = '${ctx}';</script>
<!--百度編輯器--->
<script type="text/javascript" charset="utf-8" src="${ctx}/assets/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/assets/ueditor/ueditor.all.js"> </script>
<!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗-->
<!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${ctx}/assets/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
    var ue = UE.getEditor('editor');
</script>
<div>
<script id="editor" type="text/plain" style="width:100%;height:400px;"></script>
</div>

 --------------------------

補充：如果自定義文件上傳，則，返回給編輯器的數據結構如下：

{
"state": "SUCCESS",
"original": "80px - \u526f\u672c (2).jpg",
"size": "13252",
"title": "1465731377326075274.jpg",
"type": ".jpg",
"url": "/ueditor/jsp/upload/image/20160612/1465731377326075274.jpg"
}
---------------------