The current development project involves rich text boxes. After learning about a lot of rich text editors, I finally decided to use Du Niang's UEditor. Reason: It has powerful functions and comes with pictures and video uploads that are adapted to the Java backend.
Project gallery
Without further ado, the address of the project is: http://ueditor.baidu.com/website/
It's a pity that Jianshu does not support external links on other sites.
Integration process
Backend transformation
Because the project uses the springboot framework, UEditor's support for the Java backend is only to give a jsp file. Therefore, the file needs to be processed and modified to a unified 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, the project supports upload requests from /static/common/ueditor/jsp/controller.
Front-end request
Add UEditor support in the front-end. That is, import the entire uediootr package into a project, and import the js where the control is used.
When project introduction, my corresponding code structure is as follows:
Page introduction, the corresponding code is introduced as follows:
<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> Just instantiate the UEditor editor. Below are my initialization parameters, for reference only.
//Instantiation editor var ue = UE.getEditor(''+id,{ toolbars: [ [ 'fontfamily', //Font' font'fontsize', //Font size'undo', //Undo', //Redo'|', 'emotion', //Emotion'forecolor', //Font color'backcolor', //Back color'bold', //Bold'underline', //Unline'strikethrough', //Strikethrough'|', 'justifyleft', //List-align'justifyright', //Right-align'justifycenter', //Center-align'|', 'link', //Hyperlink'unlink', //Unlink 'simpleupload', //Single image upload 'insertimage', //Music', //Music//'insertvideo', //Video', //Clear format 'formatmatch', //Format brush 'source', //Source code] ], enableAutoSave:false, autoHeightEnabled: true, autoFloatEnabled: true, initialFrameWidth:width, initialFrameHeight:height, scaleEnabled:true//Scrollbar});At this point, you will see a rich text box when visiting our page.
However, it will prompt us that there is an error in the background configuration file and the upload function cannot be implemented.
Implement upload function
Modify the config.js file and the corresponding global request path. This request is 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. I am using the method of reading configuration files here, using the method that comes with UEditor. The article has been implemented at the beginning. Here is a request that needs to be modified:
After completing the above configuration, load the UEditor page again, and the uploading button of the image can be completed.
Note: If you start debugging mode, add breakpoints and test when loading the json string. A timeout error will occur. The configuration field has not been found in the configuration file for the time being. All, it should be noted here. If all configurations are not problematic, but the background configuration error is still returned, you can cancel all the breakpoints and try it.
Note: Uploading requires adding the upload component, use fileuoload here
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3</version> </dependency>
Use servlet to implement upload
/** * Try to use servlet to implement UEditor * * @author OnyWang * @create 2018-02-05 2:40 **/@WebServlet(name = "UEditorServlet", urlPatterns = "/static/common/ueditor/UEditor")public class UEditorControllerServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding( "utf-8" ); response.setHeader("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" ).exec(); 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); } Use the servlet method and create a new annotated servlet.
You need to add the @ServletComponentScan annotation into the main method.
Modify the default access path of ueditor.
Note: Under springboot, all resource files are placed under classes. All, be careful when handling paths. Add paths to web-inf/classes
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.