web集成ueditor笔记

UEditro是一款比较好用的富文本编辑器，所谓的富文本编辑器就是和服务器交互的数据不是普通的字符串文件，而是一些内容包含比较广的字符串，一般是指的html页面，目前比较好用的是百度的UEditor，到官方网站下载：
http://ueditor.baidu.com/website/download.html

1、首先在项目下新建ueditor文件夹，把下载的ueditor文件里面的内容全部拷贝进去；

2、在我们需要使用富文本编辑器的页面里面引入ueditor：

启动程序，访问效果如下：

在页面增加如下代码，将数据提交到服务器：

controller层写法：

4、解决图片上传问题，编写接收图片的controller：

package club.ai4life.controller;

import club.ai4life.common.tools.FileImgUpload;
import club.ai4life.common.tools.UeditorFileResult;
import cn.hutool.core.io.resource.ResourceUtil;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
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 javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.nio.charset.StandardCharsets;

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

    private static final Logger log = Logger.getLogger(UeditorController.class);

    /**
     * 获取ueditor的配置
     *
     * @author fengshuonan
     * @Date 2019/8/26 15:18
     */
    @RequestMapping("/config")
    @ResponseBody
    public void getConfigInfo(HttpServletResponse response) {
        try {
            response.setContentType("application/json;charset=utf-8");
            String json = ResourceUtil.readStr("classpath:ueditor.json", StandardCharsets.UTF_8);
            response.getWriter().write(json);
            response.getWriter().flush();
        } catch (Exception e) {
            log.error("读取ueditor配置失败!", e);
        }
    }

    /**
     * 上传照片
     */
    @RequestMapping(value = "/imgUpdate", method = RequestMethod.POST)
    @ResponseBody
    public UeditorFileResult upload(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) throws IOException {
        String filePath = FileImgUpload.uploadNewsImg(upfile, request);
        String oldFileName = filePath.replace("/upload/news/img/", "");
        UeditorFileResult ueditorFileResult = new UeditorFileResult();
        ueditorFileResult.setUrl(filePath);
        ueditorFileResult.setTitle(oldFileName);
        ueditorFileResult.setOriginal(oldFileName);
        return ueditorFileResult;
    }

    /**
     * 上传涂鸦
     */
    @RequestMapping(value = "/uploadscrawl", method = RequestMethod.POST)
    @ResponseBody
    public UeditorFileResult uploadscrawl(String upfile, HttpServletRequest request) throws IOException {
        String filePath = FileImgUpload.uploadNewsImg(upfile, request);
        String oldFileName = filePath.replace("/upload/news/img/", "");
        UeditorFileResult ueditorFileResult = new UeditorFileResult();
        ueditorFileResult.setUrl(filePath);
        ueditorFileResult.setTitle(oldFileName);
        ueditorFileResult.setOriginal(oldFileName);
        return ueditorFileResult;
    }


    /**
     * ueditor文件上传方法
     */
    @RequestMapping(value = "/uploadfile", method = RequestMethod.POST)
    @ResponseBody
    public UeditorFileResult uploadfile(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) throws IOException {
        String filePath = FileImgUpload.uploadNewsFile(upfile, request);
        String oldFileName = filePath.replace("/upload/news/file/", "");
        UeditorFileResult ueditorFileResult = new UeditorFileResult();
        ueditorFileResult.setUrl(filePath);
        ueditorFileResult.setTitle(oldFileName);
        ueditorFileResult.setOriginal(oldFileName);
        return ueditorFileResult;
    }


    /**
     * 视频上传
     */
    @RequestMapping(value = "/uploadvideo", method = RequestMethod.POST)
    @ResponseBody
    public UeditorFileResult uploadvideo(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) throws IOException {
        String filePath = FileImgUpload.uploadNewsVideo(upfile, request);
        String oldFileName = filePath.replace("/upload/news/video/", "");
        UeditorFileResult ueditorFileResult = new UeditorFileResult();
        ueditorFileResult.setUrl(filePath);
        ueditorFileResult.setTitle(oldFileName);
        ueditorFileResult.setOriginal(oldFileName);
        return ueditorFileResult;
    }


}

/**
 * ueditor文件上传返回结果
 *
 * @author stylefeng
 * @Date 2017/5/5 22:40
 */
public class UeditorFileResult {

    /**
     * 状态：固定值SUCCESS
     */
    private String state = "SUCCESS";

    /**
     * 图片相对路径
     */
    private String url;

    /**
     * 文件名称（这里我使用随机字符串来重新命名图片）
     */
    private String title;

    /**
     * 文件名称（这里我使用随机字符串来重新命名图片）
     */
    private String original;

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getOriginal() {
        return original;
    }

    public void setOriginal(String original) {
        this.original = original;
    }
}