1. 程式人生 > >ueditor—— 一、基於springmvc的ueditor上傳圖片後臺配置

ueditor—— 一、基於springmvc的ueditor上傳圖片後臺配置

     這段時間專案裡需要用到富文字編輯器所以就引入了ueditor,它的功能還是很豐富的不過新手使用可能會苦於配置它的後臺上傳介面其實配置它的介面蠻簡單的,我下面簡單介紹一下

    首先你需要引入ueditor,將解壓後的安裝包放入專案的webapp下其完全目錄如下

                                

可能有人在配置ueditor後臺時出現錯誤,尤其可能是執行在伺服器端的時候出錯,然後一查發現是找不到ueditor的配置檔案config.js,這個問題就要去小小的改一下ueditor的原始碼了,這裡由於我使用的是java所以,我貼出java的修改方式

首先我們在webapp下新建一個conf目錄將ueditor的config.js放到該目錄下

然後我們到ueditor的官網下下載java版的ueditor的原始碼,找到解壓後的壓縮包中的jsp資料夾下的src資料夾,將裡面com資料夾直接複製到專案java程式碼區如下圖

                             

然後找到下面的ConfigManager類修改,修改其getConfigPath 方法

/**
 * 修改後的getConfigPath方法
 * 原來是return this.parentPath + File.separator + ConfigManager.configFileName;
 * @return
 */
private String getConfigPath () {
   return this.rootPath
         + File.separator + "conf"
         + File.separator + ConfigManager.configFileName;
}

修改成上面的沒有註釋的程式碼

做完這些之後我們需要為我們的ueditor配置一個伺服器請求地址

所以我們要寫一個controller

我這裡直接貼出springmvc下改controller的寫法

package com.ueditor.controller;

import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@Controller
@RequestMapping("/ued")
public class UeditorController {

    @RequestMapping(value="/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {

        response.setHeader("Content-Type" , "text/html");

        String rootPath = request.getSession()
                .getServletContext().getRealPath("/");

        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

寫好這個類後訪問localhost:8080/你的專案路由/ued/config

注:這裡預設你用idea配置過了專案路由,如果沒有則直接訪問

如果返回了一個形如下面的state的json資料則證明你配置成功

{"state": "\u65e0\u6548\u7684Action"}

配置到這裡代表著ueditor上傳圖片的後臺伺服器統一請求地址已經配置好了

即serverUrl已經配置好了

下面做最後一步,將ueditor的例項與這個伺服器請求地址掛上聯絡

找到ueditor目錄下的ueditor.config.js檔案,然後修改其serverUrl為你的伺服器後臺統一請求地址

若按上面樣例配置則應該修改為下面這樣

// 伺服器統一請求介面路徑
        //, serverUrl: URL + "jsp/controller.jsp"
        serverUrl: "/itahzxh/ued/config"

這樣我們ueditor上傳圖片的後臺配置就已經配置好了,不過自定義路徑還沒有實現,這個等我空閒下來了再去總結一下

希望這篇文章能夠幫助到一些人