1. 程式人生 > >SSM專案中,使用freemaker加UEditor富文字編輯器

SSM專案中,使用freemaker加UEditor富文字編輯器

在一個SSM專案中使用到了UEditor富文字編輯器,但是該編輯器使用的是JSP,這個專案不使用JSP,而是使用了freemaker,查找了一些資料對UEditor進行更改。

首先是替換掉UEditor使用的controller.jsp,把該檔案重新命名為oldController.jsp,然後把ueditor.config.js檔案中的

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

改為:

// 伺服器統一請求介面路徑
serverUrl: URL + "jsp/controller"

這裡更改的原因是要使用spring mvc來攔截該請求,但是.jsp字尾的請求不會被攔截,所以更改了請求介面路徑。

然後新增一個controller來處理該請求:

先看controller.jsp的內容:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    import="com.baidu.ueditor.ActionEnter"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%

    request.setCharacterEncoding( "utf-8" );
    response
.setHeader("Content-Type" , "text/html"); String rootPath = application.getRealPath( "/" ); out.write( new ActionEnter( request, rootPath ).exec() ); %>

處理該請求的controller:

@Controller
@RequestMapping("/static/ueditor")
public class UEditorController {


    @RequestMapping("/jsp/controller"
) public void writePage(HttpServletRequest request, HttpServletResponse response) throws IOException { request.setCharacterEncoding( "utf-8" ); response.setHeader("Content-Type" , "text/html"); String rootPath = request.getSession().getServletContext().getRealPath("/"); response.getWriter().write(new ActionEnter(request, rootPath).exec()); } }

在UEditor中的ConfigManager類會使用rootPath跟請求的URL去獲取配置檔案config.json,如果UEditor提示未完成初始化的問題,可以Debug進去看看生成的路徑是否正確,而且儲存圖片的路徑也是由rootPath加上config.json中的imagePathFormat決定的。

到這裡就已經解決了專案中沒有使用JSP的問題。

但是如果增加了SpringMVC上傳配置:

    <bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="1000000000" />
    </bean>

那麼會與UEditor自帶的上傳元件起衝突,我理解的原因是CommonsMultipartResolver類把HttpServletRequest 轉化成MultipartHttpServletRequest了,參考了https://www.cnblogs.com/vincent4code/p/5809858.html,但是在我的程式中,該方法會導致在config.josn配置的上傳路徑丟失掉第一個資料夾,如”imagePathFormat”: “/ueditor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”,儲存到本地變成目錄/upload/image/{yyyy}{mm}{dd}/{time}{rand:6},依舊報未找到上傳資料 ,debug了方法作出了修改,最終的方法為:

public static final State save(HttpServletRequest request, Map<String, Object> conf) {
        try {
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
            MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
            String savePath = (String)conf.get("savePath");
            String originFileName = multipartFile.getOriginalFilename();
            String suffix = FileType.getSuffixByFilename(originFileName);
            originFileName = originFileName.substring(0, originFileName.length() - suffix.length());
            savePath = savePath + suffix;
            long maxSize = ((Long)conf.get("maxSize")).longValue();
            if (!validType(suffix, (String[])((String[])conf.get("allowFiles")))) {
                return new BaseState(false, 8);
            } else {
                savePath = PathFormat.parse(savePath, originFileName);
                String[] savePathBySplit_temp = savePath.split("/");
                String temp = "";
                String fileName = savePathBySplit_temp[savePathBySplit_temp.length - 1];

                for(int i = 1; i < savePathBySplit_temp.length - 1; ++i) {
                    if (i != savePathBySplit_temp.length - 2) {
                        temp = temp + savePathBySplit_temp[i] + "/";
                    } else {
                        temp = temp + savePathBySplit_temp[i];
                    }
                }

                String pathTemp = request.getSession().getServletContext().getRealPath(temp);
                System.out.println(pathTemp + "," + fileName);
                System.out.println((new File(pathTemp)).exists());
                File targetFile = new File(pathTemp);
                if (!targetFile.exists()) {
                    targetFile.mkdirs();
                }

                System.out.println((new File(pathTemp)).exists());
                State storageState = StorageManager.saveFileByInputStream(multipartFile.getInputStream(), pathTemp + "/" + fileName, maxSize);
                if (storageState.isSuccess()) {
                    storageState.putInfo("url", PathFormat.format(savePath));
                    storageState.putInfo("type", suffix);
                    storageState.putInfo("original", originFileName + suffix);
                }

                return storageState;
            }
        } catch (Exception var15) {
            var15.printStackTrace();
            System.out.println(var15.getMessage());
            return new BaseState(false, 4);
        }
    }

注意:如果專案的根路徑有帶上專案的名稱,比如我的是:http://localhost:8080/jblog/,需要在config.json中設定”imageUrlPrefix”: “/jblog”, /* 圖片訪問路徑字首 */。