Detailed tutorial on using UEditor in SpringBoot (for file upload problems)

Preface
UEditor is an open source rich text editor launched by Baidu, which is very powerful. I used it once when using the SSM framework before, and there was no problem. Now I have switched to springboot. I encountered problems when using the upload function (what configuration items are incorrect, and the upload function cannot be used), and then I found some information, various, and entered After testing, here is a solution for reference.

download

Address: https://ueditor.baidu.com/website/download.html

After the download is complete, unzip it, get the utf8-jsp folder, rename it to ueditor, and copy it to your springboot project
(my static Resources are configured in the static folder built under resources)

and then focus on the jsp folder and ueditor.config.js file under the ueditor folder (used later)

lib: the jar package that uediotr depends on
config.json: the main configuration item of the upload function
ueditor.config.js: the complete configuration item

use

Add the required dependencies to your project:

		<dependency>
         	<groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.9</version>
        </dependency>
        <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>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20160810</version>
        </dependency>
        <dependency>
            <groupId>com.baidu.ueditor</groupId>
            <artifactId>ueditor</artifactId >
            <version>1.1.2</version>
            <scope>system</scope>
            <systemPath>${basedir}/src/main/resources/lib/ueditor-1.1.2.jar</systemPath >
        </dependency>

For the reference of ueditor-1.1.2.jar, I created a lib folder under resources, and then copied the jar package of ueditor under lib in ueditor to it
(but I later removed this dependency and found that it can be used normally , so this jar package may not be imported)

Quote ueditor on the page (mine is thymeleaf):

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

<script id="editor" type="text/plain" name="content" style="width:95%;height:450px;"></script>

Finally instantiate the editor

<script>
//实例化编辑器
var ue = UE.getEditor('editor', {
    });
</script>

At this point, you can open the browser to access the page as follows:

Note: At this time, the upload function is not normal, and the problem of "the back-end configuration item is incorrect, and the upload function cannot be used" will appear.

source of problem

Open ueditor.config.js and find a line of code:

that is, the request comes, it will go to controller.jsp, but springboot does not support jsp by default, but this jsp points to config.json, open config.json, the first One is the related configuration of image upload:

so springboot can't access controller.jsp, and can't read the related configuration in config.json, so it reports an error.

Solution

Idea: Since springboot cannot access config.json through jsp, then let it get the configuration in config.json directly instead of using jsp

1. Create a new Controller interface, the content is as follows

    /**
     * 上传配置：即不走config.json，模拟config.json里的内容，解决后端配置项不正确，无法上传的问题
     * @return
     */
    @RequestMapping("/ueditor/config")
    @ResponseBody
    public String uploadConfig() {
        String s = "{\n" +
                "            \"imageActionName\": \"uploadimage\",\n" +
                "                \"imageFieldName\": \"upfile\", \n" +
                "                \"imageMaxSize\": 2048000, \n" +
                "                \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +
                "                \"imageCompressEnable\": true, \n" +
                "                \"imageCompressBorder\": 1600, \n" +
                "                \"imageInsertAlign\": \"none\", \n" +
                "                \"imageUrlPrefix\": \"\",\n" +
                "                \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }";
        return s;
    }

2. Modify the serverUrl in ueditor.config.js to the url defined above (change to an absolute path when deploying)

3. Define your file upload interface on the backend (it is unrealistic to use the upload that comes with ueditor, pay attention to the return format parameters )

4. The front-end definition supports custom upload (changed to an absolute path when deploying)

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
       if (action == 'uploadimage'){
            return '/demand/upload'; /* 你自己的图片上传action */
        }else{
            return this._bkGetActionUrl.call(this, action);
        }
};

At this time, visit the page again, click the picture to upload, and there will be no error (the background uses String to receive the content, and the url of your picture is saved) 5. Custom toolbar ueditor can customize the required


toolbar
, and the default is to display all , but in practice it can be customized as needed. I don’t have functions such as uploading videos here, so it can be removed.
Official document: http://fex.baidu.com/ueditor/#start-toolbar
This is what I screened:

So far, springboot has been completed using ueditor, and you can refer to it if you need it. I hope it will be helpful to you.