spring和UEditor結合

前言

　　春節無聊，就去弄一下富文本編輯器，而後百度了一番，不少說百度的UEditor不錯，而後去官網照着文檔弄一遍，是挺簡單好用的。而後想把這玩意結合到本身的一個spring項目裏面，果真仍是在點上傳圖片的時候GG了，百度谷歌了一遍，如今只能作到先後臺一塊兒時上傳圖片可用，若是有jsp 的 UEditor跨域能上傳圖片的告訴小弟一聲，這裏就總結一下這幾天遇到的各類問題。

　　PS：話說博客園這裏的富文本編輯器好像還能夠。。。。

簡介

　　UEditor是百度開發的一個開源html富文本編輯器，界面的確是好看一點，文檔方面還算齊全，雖然跨域上傳這塊留了個坑讓咱們發揮想象力ヾ(￣▽￣)，因此爲了防止UEditor有坑，須要改動UEditor的源碼，這裏建議下載UEditor的源碼放到本身項目裏面，UEditor的源碼挺簡單的，只要跟蹤Debug一下很容易能夠看出問題。

　　這裏演示的spring項目集成了spring security和Thymeleaf，構建用maven構建，UEditor的後臺控制器改爲spring mvc的controller，本來想用Servlet，找了不少資料，貌似沒看到spring mvc項目能夠集成源生Servlet，可是spring boot經過@ServletComponentScan能夠註冊Servlet，用spring boot集成UEditor最是方便，基本沒坑，一路暢通，這一點我已經試過。下面主要說spring項目如何集成UEditor後臺。

正文

　　UEditor的下載安裝什麼的就不說了，直接上圖。

　　前端文件目錄：

　　

　　把UEditor後臺的源碼放到本身項目裏：

　　

　　添加UEditor後臺的依賴：

　　

　　　　 <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>

        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>

        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.10</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20160810</version>
        </dependency>

　　因爲咱們用spring mvc，因此UEditor的controller.jsp要改爲Controller的形式，基本把UEditor的controller代碼複製過來就是了。

 1 @Controller
 2 public class UEditorController {
 3     @RequestMapping("/ued/config")
 4     public void service(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
 5 
 6         request.setCharacterEncoding("utf-8");
 7         response.setHeader("Content-Type" , "text/html");
 8         String rootPath = request.getSession()
 9                 .getServletContext().getRealPath("/");
10 
11         try {
12             String exec = new ActionEnter(request, rootPath).exec();
13             PrintWriter writer = response.getWriter();
14             writer.write(exec);
15             writer.flush();
16             writer.close();
17         } catch (IOException e) {
18             e.printStackTrace();
19         }
20     }
21 
22 }

Controller

　　而後咱們改一下UEditor的後臺接口，把它改爲咱們的Controller

　　

　　到這裏，若是咱們嘗試去用UEditor，會出現找不到後臺配置的錯誤，這是因爲默認controller.jsp和config.json是同一目錄，UEditor的後臺代碼沒法找到config.json的緣故，這裏咱們找到UEditor的後臺源碼裏面的ConfigManager，將getConfigPath()方法改一下，這裏我是把config.json放到了maven src/main/resources，也就是classpath路徑下，若有不一樣，則相應改變便可。

　　

　　這樣，UEditor算是找到config.json，然而上傳圖片功能依然不行，這裏主要是由於spring mvc在controller注入的request對象和UEditor用的commons-fileupload有衝突，致使commons-fileload沒法獲取request裏面的文件字節流，經過debug（因此說要下載源碼），而後咱們只須要把com.baidu.ueditor.upload.BinaryUploader類的上傳文件方法改一下。

　　這裏我主要改動了關鍵的FileItemIterator iterator = upload.getItemIterator(request);　　儘可能保持源碼的樣子。

public static final State save(HttpServletRequest request,
            Map<String, Object> conf) {
        boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;

        if (!ServletFileUpload.isMultipartContent(request)) {
            return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
        }

        ServletFileUpload upload = new ServletFileUpload(
                new DiskFileItemFactory());

        if ( isAjaxUpload ) {
            upload.setHeaderEncoding( "UTF-8" );
        }

        try {
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
//            FileItemIterator iterator = upload.getItemIterator(request);
//
//            while (iterator.hasNext()) {
//                fileStream = iterator.next();
//
//                if (!fileStream.isFormField())
//                    break;
//                fileStream = null;
//            }

            if (multipartFile == null) {
                return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
            }

            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[]) conf.get("allowFiles"))) {
                return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
            }

            savePath = PathFormat.parse(savePath, originFileName);

            String physicalPath = (String) conf.get("rootPath") + savePath;

            InputStream is = multipartFile.getInputStream();
            State storageState = StorageManager.saveFileByInputStream(is,
                    physicalPath, maxSize);
            is.close();

            if (storageState.isSuccess()) {
                storageState.putInfo("url", PathFormat.format(savePath));
                storageState.putInfo("type", suffix);
                storageState.putInfo("original", originFileName + suffix);
            }

            return storageState;
        } catch (IOException e) {
        }
        return new BaseState(false, AppInfo.IO_ERROR);
    }

    private static boolean validType(String type, String[] allowTypes) {
        List<String> list = Arrays.asList(allowTypes);

        return list.contains(type);
    }

View Code

　　到這裏，UEditor可以上傳文件了，可能還有一點小坑就是文件保存的路徑和返回給前端的路徑不太相符，這個你們debug一下，在config.json裏面能夠修改文件的上傳保存路徑和返回url前綴等配置，源碼在手，有什麼錯都能本身改一下。另外由於我項目有用spring security，因此response頭的X-Frame-Options默認是DENY，這樣會時UEditor上傳圖片的坑爹iframe顯示不出圖片。這裏我試過在Controller那裏setHeader，結果前端說X-Frame-Options有兩個值，真是日了狗。因此乾脆把spring security這個功能關了，你們知道怎麼在controller改header值告訴我一聲。

http.headers().frameOptions().disable()