当前位置：首页>后端>正文

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器

后端2024-06-18 17:45:22

最近前端页面需要使用百度的Ueditor富文本编辑器，本来以为只需要前端适配就可以了，没想到Ueditor需要使用一个服务器统一请求接口，各种百度，历时一天终于弄懂了是怎么一回事，下面是我整了的三种整合的方式，从使用Ueditor的后端代码，到引入Ueditor依赖，到最后完全接管Ueditor后端，都是验证可行的。

一、代码源码下载

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_java,第1张

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_spring boot_02,第2张

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_java_03,第3张

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_配置文件_04,第4张

方式一：根据ueditor后端源码构建项目

1、复制后端包

复制jsp中的后端代码，需要修改import的包路径为当前项目的包路径

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_spring boot_05,第5张

2、复制前端包

复制uft8-jsp中前端代码到resources的static目录

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_配置文件_06,第6张

3、复制配置文件

其实这个配置文件放到哪里都可以，只要在代码中配置好路径，使得能够找到配置文件即可，这里为了方便获取配置文件，放到resources目录下最合适

4、配置文件上传路径并设置为静态资源路径

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_spring_07,第7张

5、编写Controller接口

package com.wishboy.myueditor.controller;

import com.wishboy.myueditor.ueditor.ActionEnter;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@Controller
@RequestMapping("/ueditor")
public class UEditorController {

    //注入application.properties里面的配置web.upload-path
    @Value("${web.upload-path}")
    private String uploadPath;

    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = uploadPath;
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

注入文件上传路径
/ueditor/config接口为ueditor访问后端的统一接口地址，根据action参数判拉取配置文件和文件上传

6、修改ConfigManager文件

这里主要是修改configFileName，需要设置为config.json文件存放的resources下的目录

public final class ConfigManager {

   private final String rootPath;
   private final String originalPath;
   private final String contextPath;
   private static final String configFileName = "static/config.json";

7、前端js配置修改

修改ueditor.config.js中的serverUrl地址，后端提供
http://localhost:80/ueditor/config这个就是前端ueditor页面请求后端的统一接口

window.UEDITOR_CONFIG = {

    //为编辑器实例添加一个路径，这个不能被注释
    UEDITOR_HOME_URL: URL

    // 服务器统一请求接口路径
    , serverUrl: "http://localhost:80/ueditor/config"

8、关于统一接口地址的说明

获取配置文件

前端在ueditor.config.js文件中配置serverUrl地址，这个地址用于获取配置文件config.json
完整接口地址为：http://localhost:80/ueditor/config_upload?action=config
该接口参数由ueditor自动配置成功

上传文件

文件格式包括：图片、视频、文件等
ueditor会根据按钮的设置，自动添加参数到统一接口地址末尾
如图片上传：http://localhost/ueditor/config_upload?action=uploadimage

9、后端依赖

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

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

    <dependency>
        <groupId>org.json</groupId>
        <artifactId>json</artifactId>
        <version>20220320</version>
    </dependency>

    <dependency>
        <groupId>commons-codec</groupId>
        <artifactId>commons-codec</artifactId>
        <version>1.9</version>
    </dependency>

</dependencies>

方式二：引入ueditor依赖实现

1、引入ueditor依赖

<!-- 百度文本编辑器后台部分 -->
<dependency>
    <groupId>com.gitee.qdbp.thirdparty</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3.3</version>
</dependency>

<!-- 也可以使用fastjson -->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20220320</version>
</dependency>

2、复制前端包

复制uft8-jsp中前端代码到resources的static目录

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_后端_08,第8张

3、复制配置文件

其实这个配置文件放到哪里都可以，只要在代码中配置好路径，使得能够找到配置文件即可，这里为了方便获取配置文件，放到resources目录下最合适

4、编写Controller接口

package com.wishboy.myueditor.springboot.controller;

import com.alibaba.fastjson.JSONObject;
import com.baidu.ueditor.ActionEnter;
import com.baidu.ueditor.upload.StorageManager;
import com.wishboy.myueditor.springboot.service.UeditorService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@RestController
@RequestMapping("ueditor")
public class UeditorController {

    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        // 读取配置文件中配置的上传文件保存地址
        String rootPath = this.getClass().getClassLoader().getResource("").getPath();
        String configPath = "static/config.json";
        try {
//            String exec = new ActionEnter(request, rootPath).exec();
            String exec = new ActionEnter(new StorageManager(), request, rootPath, configPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

5、前端js配置修改

http://localhost:80/ueditor/config这个就是前端ueditor页面请求后端的统一接口
修改ueditor.config.js中的serverUrl地址，后端提供

window.UEDITOR_CONFIG = {

    //为编辑器实例添加一个路径，这个不能被注释
    UEDITOR_HOME_URL: URL

    // 服务器统一请求接口路径
    , serverUrl: "http://localhost:80/ueditor/config"

方式三：后端实现统一请求接口

编写Ueditor工具类

package net.trueland.tcloud.crm.common.util;

import com.alibaba.fastjson.JSONObject;
import lombok.extern.slf4j.Slf4j;
import net.trueland.tcloud.crm.service.common.FileService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.util.WebUtils;

import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.HashMap;
import java.util.Map;

/**
 * @author zhujie
 * @date 2022/6/23
 * @description Ueditor 富文本编辑器工具类，后端完全接管
 */

@Component
@Slf4j
public class UeditorUitls {

    //配置文件路径，默认为resources/ueditor-config.json
    private final String configPath = "ueditor-config.json";

    @Autowired
    private FileService fileService;

    /**
     * 读取Ueditor配置文件，或者上传文件
     *
     * @param action 读配置文件：config  图片上传：uploadimage 详见 ActionMap.mapping
     * @return
     */
    public Object getConfigOrUploadFile(String action, HttpServletRequest request) {
        int actionCode = ActionMap.getType(action);
        Object result = null;
        switch (actionCode) {
            case ActionMap.CONFIG:
                try {
                    Resource resource = new ClassPathResource(configPath);
                    InputStream is = resource.getInputStream();
                    String configContent = this.readUeditorConfigFile(is);
                    result = JSONObject.parseObject(configContent);
                } catch (IOException e) {
                    e.printStackTrace();
                }
                break;
            case ActionMap.UPLOAD_IMAGE:
            case ActionMap.UPLOAD_SCRAWL:
            case ActionMap.UPLOAD_VIDEO:
            case ActionMap.UPLOAD_FILE:
                MultipartHttpServletRequest multipartRequest =
                        WebUtils.getNativeRequest(request, MultipartHttpServletRequest.class);
                MultipartFile uploadFile = multipartRequest.getFile("upfile");
                result = fileService.upload2Server(uploadFile);
                break;
            case ActionMap.CATCH_IMAGE:
            case ActionMap.LIST_IMAGE:
            case ActionMap.LIST_FILE:
                break;
        }
        return result;
    }

    /**
     * 读取配置文件信息
     *
     * @param is
     * @return
     * @throws IOException
     */
    private String readUeditorConfigFile(InputStream is) throws IOException {
        StringBuilder builder = new StringBuilder();
        try {
            InputStreamReader reader = new InputStreamReader(is, "UTF-8");
            BufferedReader bfReader = new BufferedReader(reader);
            String tmpContent = null;
            while ((tmpContent = bfReader.readLine()) != null) {
                builder.append(tmpContent);
            }
            bfReader.close();
        } catch (UnsupportedEncodingException e) {
            // 忽略
        }
        return this.filter(builder.toString());
    }

    // 过滤输入字符串, 剔除多行注释以及替换掉反斜杠,官方配置文件中有注释
    private String filter(String input) {
        return input.replaceAll("/\*[\s\S]*?\*/", "");

    }

    /**
     * 请求action映射类
     */
    static class ActionMap {

        public static final Map<String, Integer> mapping;
        // 获取配置请求
        public static final int CONFIG = 0;
        public static final int UPLOAD_IMAGE = 1;
        public static final int UPLOAD_SCRAWL = 2;
        public static final int UPLOAD_VIDEO = 3;
        public static final int UPLOAD_FILE = 4;
        public static final int CATCH_IMAGE = 5;
        public static final int LIST_FILE = 6;
        public static final int LIST_IMAGE = 7;

        static {
            mapping = new HashMap<String, Integer>() {{
                put("config", ActionMap.CONFIG);
                put("uploadimage", ActionMap.UPLOAD_IMAGE);
                put("uploadscrawl", ActionMap.UPLOAD_SCRAWL);
                put("uploadvideo", ActionMap.UPLOAD_VIDEO);
                put("uploadfile", ActionMap.UPLOAD_FILE);
                put("catchimage", ActionMap.CATCH_IMAGE);
                put("listfile", ActionMap.LIST_FILE);
                put("listimage", ActionMap.LIST_IMAGE);
            }};
        }

        public static int getType(String key) {
            return ActionMap.mapping.get(key);
        }
    }
}

UeditorUitls是Ueditor工具类，包含处理请求的统一接口方法getConfigOrUploadFile(String action, HttpServletRequest request)
ActionMap是UeditorUitls的静态内部类，定义了请求action的类型及映射
readUeditorConfigFile(InputStream is)读取配置文件数据
filter(String input)过滤配置文件注释
request用于上传文件时从请求中获取文件流

2、复制前端包

复制uft8-jsp中前端代码到resources的static目录

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_后端_08,第8张

3、复制配置文件

其实这个配置文件放到哪里都可以，只要在代码中配置好路径，使得能够找到配置文件即可，这里为了方便获取配置文件，放到resources目录下最合适

4、编写Controller接口

@ApiOperation("Ueditor富文本编辑器服务端统一请求接口")
@RequestMapping("/config/upload/file")
public Rsp<Object> configUploadFile(@RequestParam("action") String action, HttpServletRequest request){
    Object result = ueditorUitls.getConfigOrUploadFile(action, request);
    return Rsp.success(result);
}

5、实现效果

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_spring_10,第10张

springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器,springboot接收前端富文本丢失HTML标签 springboot整合富文本编辑器_配置文件_11,第11张

查看全文

https://www.xamrdz.com/backend/3dm1964206.html

一、代码源码下载

方式一：根据ueditor后端源码构建项目

1、复制后端包

2、复制前端包

3、复制配置文件

4、配置文件上传路径并设置为静态资源路径

5、编写Controller接口

6、修改ConfigManager文件

7、前端js配置修改

8、关于统一接口地址的说明

获取配置文件

上传文件

9、后端依赖

方式二：引入ueditor依赖实现

1、引入ueditor依赖

2、复制前端包

3、复制配置文件

4、编写Controller接口

5、前端js配置修改

方式三：后端实现统一请求接口

编写Ueditor工具类

2、复制前端包

3、复制配置文件

4、编写Controller接口

5、实现效果

相关文章：