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到項目中了

一、後臺寫一個接收方法，複製下面代碼便可：（能夠參考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"}---------------------