SpringBoot integrates the UEditor sample code, springbootueditor

SpringBoot integrates the UEditor sample code, springbootueditor

The current development project involves rich text boxes. After learning a lot about Rich Text editors, we finally decided to use du Niang's UEditor. Cause: it is powerful and supports java back-end image and video upload.

Project address

Not to mention, the address of the project: http://ueditor.baidu.com/website/

It is a pity that the short book does not support external links of markdown other sites.

Integration Process

Backend Transformation

Because the project uses the springboot framework, UEditor only provides a jsp file for java backend support. Therefore, you need to process the file and change it to a uniform controller for springboot.

@Controller@Transactional@RequestMapping("/static/common/ueditor/jsp")public class JSPController {  @RequestMapping("/controller")  @ResponseBody  public void getConfigInfo(HttpServletRequest request,HttpServletResponse response){    response.setContentType("application/json");    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 | JSONException e) {      e.printStackTrace();    }  }

As mentioned above, this project supports upload requests from/static/common/ueditor/jsp/controller.

Frontend request

Add UEditor support at the front end. That is, the entire uediotr package is imported into the project and js is imported where the control is used.

Project Introduction. The code structure is as follows:

Page Introduction:

<script type="text/javascript" charset="utf-8" th:src="@{/static/common/ueditor/ueditor.config.js}"></script>  <script type="text/javascript" charset="utf-8" th:src="@{/static/common/ueditor/ueditor.all.js}"></script>

Instantiate the UEditor. The following are my initialization parameters for reference only.

// Instantiate the editor var ue = UE. getEditor (''+ id, {toolbars: [['fontfamily ', // font 'fontsize', // font size 'undo', // cancel 'redo ', // redo '|', 'expression', // expression' forecolor', // font color 'backcolor', // background color 'bold ', // bold 'underline ', // underline 'strikethangout', // strikethrough '|', 'justifyleft', // align left with 'justifyright', // align right with 'justifycenter ', // center alignment '|', 'link', // The hyperlink 'unlink', // cancel the link 'simpleupload', // upload 'insertimage' in a single figure ', // upload multiple images // 'music', // music // 'insertvideo', // video 'removeformat', // clear the format 'formatmatch ', // format 'source', // source code], enableAutoSave: false, autoHeightEnabled: true, autoFloatEnabled: true, initialFrameWidth: width, initialFrameHeight: height, scaleEnabled: true // scroll bar });

In this case, the rich text box is displayed when you access our page.

However, an error occurs in the background configuration file and the upload function cannot be implemented.

Implement the upload function

Modify the global Request Path of the config. js file. This request is used to obtain the configuration data corresponding to config. json. You can directly return configuration information in the Controller or read json files in the controller. Here I use the method of reading the configuration file. The UEditor method has been implemented at the beginning of the article. Here I post the request to be modified:

After completing the preceding configuration, load the UEditor page again. Upload the image by clicking the upload button.

Note: If you start the debugging mode, add the breakpoint to test the loading of the json string. A timeout error occurs. The configuration field is not found in the configuration file. All. Please note that if all the configurations are normal but the background configuration error is still returned, you can cancel all the breakpoints and try again.

Note: The upload component must be added for upload. Here, fileuoload is used.

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

Upload using servlet

/*** Try to use servlet to implement UEditor ** @ author OnyWang * @ create 2:2-02-05 **/@ WebServlet (name = "UEditorServlet ", urlPatterns = "/static/common/ueditor/UEditor") public class extends HttpServlet {@ Override protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request. setCharacterEncoding ("UTF-8"); response. s EtHeader ("Content-Type", "text/html"); PrintWriter out = response. getWriter (); ServletContext application = this. getServletContext (); String rootPath = application. getRealPath ("/"); String action = request. getParameter ("action"); String result = new ActionEnter (request, rootPath + "WEB-INF/classes" cmd.exe c (); if (action! = Null & (action. equals ("listfile") | action. equals ("listimage") {rootPath = rootPath. replace ("\", "/"); result = result. replaceAll (rootPath, "/");} out. write (result) ;}@ Override protected void doGet (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost (req, resp );}

Create an annotation servlet using servlet.

Add the @ ServletComponentScan annotation to the main method.

Modify the default access path of ueditor.

Note: In springboot, all resource files are placed under the classes, so be careful when processing paths. Put it in the Add path web-inf/classes

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.