Shulou(Shulou.com)06/03 Report--

This article mainly explains "the implementation steps of ueditor upload function under springboot". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "the implementation steps of ueditor upload function under springboot"!

Display of the overall project structure

Specific steps for Springboot to integrate ueditor and upload functions

1. Download ueditor-1.4.3.3

This can be downloaded from the official website, but it seems that there are no resources in the utf-8 version. The source version was interrupted several times, and finally I downloaded it from a third party.

2. Create a new test page

There is an index.html in the root directory of ueditor. Just use it. The source code is as follows

Complete demo

UEditor demo

Get the whole html content, get the content, write the content, add the content, get the plain text, get the formatted plain text, judge whether there is content to make the editor get focus, whether the editor gets focus, the editor loses focus.

Get the currently selected text to insert the given content can be edited non-editable hidden editor display editor setting height is 300 automatic height is turned off by default

Get the contents of the draft box and empty the draft box

Create an editor to delete an editor

/ / instantiate the editor / / it is recommended to use the factory method getEditor to create and reference the editor instance. If the editor is referenced under a closure, call UE.getEditor ('editor') directly to get the relevant instance var ue = UE.getEditor (' editor'); function isFocus (e) {alert (UE.getEditor ('editor'). IsFocus ()); UE.dom.domUtils.preventDefault (e)} function setblur (e) {UE.getEditor (' editor'). Blur () UE.dom.domUtils.preventDefault (e)} function insertHtml () {var value = prompt ('insert html code','); UE.getEditor ('editor'). ExecCommand (' insertHtml', value)} function createEditor () {enableBtn (); UE.getEditor ('editor');} function getAllHtml () {alert (UE.getEditor (' editor'). GetAllHtml ()} function getContent () {var arr = [] Arr.push ("Editor's content can be obtained using the editor.getContent () method"); arr.push ("content is:"); arr.push (UE.getEditor ('editor'). GetContent ()); alert (arr.join ("\ n"));} function getPlainTxt () {var arr = []; arr.push ("Editor's formatted plain text content can be obtained using editor.getPlainTxt () method"); arr.push ("content is:") Arr.push (UE.getEditor ('editor'). GetPlainTxt ()); alert (arr.join ('\ n'))} function setContent (isAppendTo) {var arr = []; arr.push ("use the editor.setContent ('welcome to ueditor') method to set the content of the editor"); UE.getEditor (' editor'). SetContent ('welcome to ueditor', isAppendTo); alert (arr.join ("\ n")) } function setDisabled () {UE.getEditor ('editor'). SetDisabled (' fullscreen'); disableBtn ("enable");} function setEnabled () {UE.getEditor ('editor'). SetEnabled (); enableBtn ();} function getText () {/ / the editing area has lost focus when you click the button. If you use getText directly, you will not get the content, so select it and get the content var range = UE.getEditor (' editor'). Selection.getRange () Range.select (); var txt = UE.getEditor ('editor'). Selection.getText (); alert (txt)} function getContentTxt () {var arr = []; arr.push ("you can get the plain text content of the editor using the editor.getContentTxt () method"); arr.push ("the editor's plain text content is:"); arr.push (UE.getEditor (' editor'). GetContentTxt ()); alert (arr.join ("\ n")) } function hasContent () {var arr = []; arr.push ("use the editor.hasContents () method to determine whether there is content in the editor"); arr.push ("judgment result is:"); arr.push (UE.getEditor ('editor'). HasContents ()); alert (arr.join ("\ n"));} function setFocus () {UE.getEditor (' editor'). Focus ();} function deleteEditor () {disableBtn () UE.getEditor ('editor'). Destroy ();} function disableBtn (str) {var p = document.getElementById (' btns'); var btns = UE.dom.domUtils.getElementsByTagName (p, "button"); for (var I = 0, btn; btn = btns [iTunes +];) {if (btn.id = = str) {UE.dom.domUtils.removeAttributes (btn, [disabled "]);} else {btn.setAttribute (" disabled "," true ") } function enableBtn () {var p = document.getElementById ('btns'); var btns = UE.dom.domUtils.getElementsByTagName (p, "button"); for (var I = 0, btn; btn = btns [iTunes +];) {UE.dom.domUtils.removeAttributes (btn, ["disabled"]);}} function getLocalData () {alert (UE.getEditor (' editor'). ExecCommand ("getlocaldata")) } function clearLocalData () {UE.getEditor ('editor') .execCommand ("clearlocaldata"); alert ("emptied draft box")}

3. Introduce the jar package required for upload

Com.gitee.qdbp.thirdparty ueditor 1.4.3.3 commons-codec commons-codec commons-fileupload commons-fileupload 1.3.1 commons-io commons-io 2.5 compile org.json json

4. Create a new directory folder for uploading files, as follows

The config.json is copied from the ueditor-1.4.3.3 folder, because I found that the default upload path is the directory where config.json is located, and it is useless for me to try to configure imagePathFormat under springboot.

5. Create a new UeditorController

It is used to read the ueditor.json configuration file and implement the upload method at the same time (of course, we use ueditor.jar upload directly here, so it is very simple, but if we have to write it ourselves, there will be a lot of code)

Import com.baidu.ueditor.ActionEnter;import org.springframework.stereotype.Controller;import org.springframework.util.ClassUtils;import org.springframework.web.bind.annotation.RequestMapping; import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.PrintWriter / * Baidu Rich text Editor * describes that the file types configured in 1:config.json, such as image size limit (imageMaxSize), have been verified in the page js. The backend does not need to process * description 2: if you use ueditor.jar, you do not need to describe yourself * describe the imageUrlPrefix configuration in 3:config.json example: "imageUrlPrefix": "/ fileupload/ueditor" * describe the imagePathFormat configuration in 3:config.json example: "imagePathFormat": "/ image/ {yyyy} {mm} {dd} / {time} {rand:6}" * describe 4:imageUrlPrefix + imagePathFormat as the access path for uploaded files Path * * zkh * 9:09 on November 14, 2019 * / @ Controllerpublic class UeditorController {/ the parent directory where the ueditor/jsp/config.json file is located The default root directory for uploading files is the directory where config.json files are located: private String configJsonParentPath = ClassUtils.getDefaultClassLoader () .getResource (") .getPath () +" static/fileupload/ueditor " / * the serverUrl address is requested as get when UEditor is initialized, and the UEditor configuration file information needs to be returned during action=config * description: if you use the ActionEnter in the ueditor.jar package, you do not need to implement its upload function yourself, because ActionEnter has already implemented * / @ RequestMapping ("ueditor") public void getEditorConfig (HttpServletRequest request, HttpServletResponse response, String action) {response.setContentType ("application/json") Try {String exec = new ActionEnter (request, configJsonParentPath). Exec (); if (actionless null & (action.equals ("listfile") | | action.equals ("listimage")) {exec = exec.replace (configJsonParentPath.substring (1), "/");} PrintWriter writer = response.getWriter (); writer.write (exec); writer.flush (); writer.close ();} catch (Exception) {e.printStackTrace ();}

Pay attention to the notes

6. Next, we need to configure the serverUrl in ueditor.config.js to the controller we used in step 5, as follows

7. Finally, configure the details of our upload in config.json. Take image upload as an example.

/ * upload image configuration item * / "imageActionName": "uploadimage", / * action name of the uploaded image (for example: http://localhost:8080/ueditor?action=uploadimage) * / "imageFieldName": "upfile", / * name of the submitted image form * / "imageMaxSize": 2048000, / * upload size limit Unit B * / "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], / * upload image format to display * / "imageCompressEnable": true, / * whether to compress the image. The default is true * / "imageCompressBorder": 1600, / * the maximum edge limit for image compression * / "imageInsertAlign": "none". / * imageUrlPrefix + imagePathFormat is the access path of the current file * / "imageUrlPrefix": "/ fileupload/ueditor", / * Image access path prefix * / / * imagePathFormat defaults to the directory where the current config.json is located as the root directory * / "imagePathFormat": "/ image/ {yyyy} {mm} {dd} / {time} {rand:6}" / * (Note: the current config.json directory is taken as the root directory by default) upload and save path, you can customize the save path and file name format * / / * {filename} will be replaced with the original file name. If you configure this, you should pay attention to the problem of garbled codes in Chinese * / * {rand:6} will be replaced with a random number. The following number is a random number of digits * / / * {time} will be replaced with a timestamp * / * {yyyy} will be replaced with a four-digit year * / / * {yy} will be replaced with a two-digit year * / / * {mm} will be replaced with a two-digit month * / / * {dd} will be replaced with a two-digit date * / / * {hh} Into a two-digit hour * / / * {ii} will be replaced by a two-digit minute * / / * {ss} will be replaced with a two-digit second * / / * illegal character\: *? "

| | * / / * Please check the online documentation: fex.baidu.com/ueditor/#use-format_upload_filename * / |

What we need to focus on here is imageUrlPrefix and imagePathFormat.

1) Domain name + imageUrlPrefix + imagePathFormat is the access path to the current file

2) imageUrlPrefix is the prefix of the image access path, for example: http://localhost:8080/fileupload/ueditor imageUrlPrefix is the "/ fileupload/ueditor"

3) imagePathFormat is the specific path where files with imageUrlPrefix as the root path are stored, for example:

Http://localhost:8080/fileupload/ueditor/image/20190202/121222.jpg imagePathFormat is one of the "/ image/20190202/121222.jpg"

4) the remaining parameters are obvious.

7. Problems you may encounter

1. The maximum number of configured files is 2048000, but only 1m of files have been reported wrong in the background.

Solution: this is because the upload of springboot is enabled by default. Spring.servlet.multipart.enabled=false is fine in application.properties, or you can skip its default maximum value, spring.servlet.multipart.max-file-size=1MB, as shown below:

2. Obviously modified imagePathFormat, single or saved in the original path?

Solution: just put the config.json file in the location where I want to save the file.

3. Online management pictures can not be displayed?

Solution: it has already been solved in the UeditorController above, which is to replace the configJsonParentPath path in the string obtained by new ActionEnter (request, configJsonParentPath). Exec () with an empty string when action=listfile or action=listimage

Finally, start the service and open the http://localhost:8080/ueditor/index.html page for testing.

At this point, I believe you have a deeper understanding of the "implementation steps of ueditor upload function under springboot". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.