SpringMV+Ueditor整合方案一(不需要原生提供的Jsp和Jar和配置json放在內部class)

本文详述了如何将百度前端富文本编辑器Ueditor与SpringMVC框架结合,通过自定义Controller实现图片上传等功能,替代官方JSP后端方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文旨在整合百度前端富文本Ueditor与SpringMVC,使用Spring Controller作为Ueditor的后端,提供上传图片等后台相关的功能,即使用SpringMVC替换官方提供的JSP后台方式。

创建web工程,本文以maven进行创建和管理,最终目录结构如下:

创建Ueditor统一后台Controller服务

import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("/ued")
public class UeditorController{
    
    @RequestMapping("/serverUrl")
    @ResponseBody
    public Object test(HttpServletRequest request,
                       @RequestParam(value = "action") String action, 
                       @RequestParam(value = "upfile", required = false) MultipartFile file) throws Exception {
       switch (action) {
           case "config": // 加载返回ueditor配置文件conf/config.json
               return getConfig();
           case "uploadimage": // 上传图片
               return uploadImage(request, file);
           case "uploadvideo": // 上传视频
               return "视频处理方法";
           case "uploadfile": // 上传文件
               return "文件处理方法";
           default:
               return "无效action";
        }
    }
   
    private String getConfig() throws Exception {
        File file = ResourceUtils.getFile("classpath:conf/config.json");
        String json = FileUtils.readFileToString(file, "utf-8");
        return json;
    }
    
    private Map<String, Object> uploadImage(HttpServletRequest request, MultipartFile file) {
        
        String state = "SUCCESS";
        String savedDir = request.getSession().getServletContext().getRealPath("upload");
        String filename = file.getOriginalFilename();
        File filepath = new File(savedDir,filename);
        if (!filepath.getParentFile().exists()) {
            filepath.getParentFile().mkdirs();
        }
        // 写到服务器路径下,可扩展,比如上传到云端或文件服务器
        file.transferTo(new File(savedDir + File.separator + filename));
        String uploadHttpUrl = "http://localhost:8083/upload"+ File.separator + filename;
        return resultMap(file, state, uploadHttpUrl);
    }
    
    private Map<String, Object> resultMap(MultipartFile file, String state, String uploadHttpUrl) {
        Map<String, Object> resMap = new HashMap<String, Object>();
        resMap.put("state", state);  //"SUCCESS" 表示成功
        resMap.put("title", file.getOriginalFilename());
        resMap.put("original", file.getOriginalFilename());
        resMap.put("type", file.getContentType());
        resMap.put("size", file.getSize());
        resMap.put("url", uploadHttpUrl);
        return resMap;
    }
   
}

配置ueditor.config.js

把文件中的serverUrl: URL + "jsp/controller.jsp",修改为serverUrl: "/ued/serverUrl" 即可。

 

下章主要介绍如何优化ueditor和修改目前存在的bug

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值