SpringBoot中使用UEditor基本配置(圖文詳解)

2018年03月12日 10:52:32 BigPotR 閱讀數：4497

 

    最近因工作需要，在自己研究百度的富文本編輯器UEditor，這個過程中也遇到很多問題，這里寫一下我的心得和總結，希望幫到需要幫助的人。正文如下：

第一步：創建SpringBoot項目

    首先我使用的是IDEA 2017(不得不說IDEA創建Spring項目確實要方便一些)，新建一個SpringBoot項目:

    最上角 File -> New -> Project -> Spring Initializr 

    

    直接下一步

    

    這些根據需要自行配置即可(這里我使用的是默認配置)。

    

    這里我選擇的是SpringBoot 1.5.10版本，勾選上Web，然后下一步選擇項目保存的目錄，這樣就創建好了。

    創建好的目錄結構如下:

    

第二步：下載UEditor

    下載地址：http://ueditor.baidu.com/website/download.html

            

    解壓后的文件結構如下：

  

    將除jsp文件夾以外的文件都放入項目src/main/resources/static目錄下

    

    在項目根目錄下創建一個lib文件夾，用於導入UEditor的jar包

    

    將UEdito解壓目錄下的jsp/lib文件夾中的jar考入lib目錄中，然后將jar包加入項目中

    最上角 File -> Project Structrue -> Libraries 

    

完成之后啟動Application，訪問localhost:8080，效果如下

到這里UEditor的導入就完成了。

第三步：UEditor的基本配置

    雖然現在有了初步的效果，但是還是不能上傳圖片，現在進行后端配置

    之前的jsp文件夾下面除了jar包外還有兩個文件，一個是controller.jsp和config.json，controller.jsp其實就是為了獲取config.js中的配置，所以為了方便管理以及規范，我們新建一個UEditorController將controller.jsp的內容拷貝進去，然后將config.json放到resources/static目錄下，然后將Application文件移到controller的同級目錄下,不然會掃描不到controller

    

    UEditorController.java內容如下

1.  
   package com.example.controller;
2.  
   import com.baidu.ueditor.ActionEnter;
3.  
   import org.json.JSONException;
4.  
   import org.springframework.beans.factory.annotation.Autowired;
5.  
   import org.springframework.web.bind.annotation.RequestMapping;
6.  
   import org.springframework.web.bind.annotation.RestController;
7.  
   import javax.servlet.http.HttpServletRequest;
8.  
   import javax.servlet.http.HttpServletResponse;
9.  
   import java.io.IOException;
10.  
    import java.io.PrintWriter;
11.  
     
12.  
    @RestController
13.  
    public class UEditroController {
14.  
    @Autowired
15.  
    private HttpServletRequest request;
16.  
    @RequestMapping("/ueditorConfig")
17.  
    public void getUEditorConfig(HttpServletResponse response){
18.  
    String rootPath = "src/main/resources/static";
19.  
    try {
20.  
    String exec = new ActionEnter(request, rootPath).exec();
21.  
    PrintWriter writer = response.getWriter();
22.  
    writer.write(exec);
23.  
    writer.flush();
24.  
    writer.close();
25.  
    } catch (IOException | JSONException e) {
26.  
    e.printStackTrace();
27.  
    }
28.  
    }
29.  
    }

    因為controller.jsp中的

        String rootPath = application.getRealPath( "/" )

    沒能獲取到正確的路徑，所以這里我手動更改了路徑，這個路徑就是config.json的位置

    然后修改resource/static目錄下的ueditor.config.js文件

    33行左右的serverUrl的路徑改為之前UEditorController的訪問路徑,我這里的路徑是"/ueditorConfig"，serverUrl就是服務器統一請求接口路徑

    

 

    以上都更改完之后運行Application訪問http://localhost:8080/ueditorConfig?action=config

    如果出現類似以下內容則表示讀取配置成功

    

    該內容即是config.json中的內容

    SpringBoot中使用UEditor的基本配置到這里就完成了，但是還是不能上傳圖片，之后會講解一下UEditor上傳圖片的配置。