SpringBoot整合Ueditor百度富文本教程

1.准备文件下载地址:

官方文档地址: UEditor Docs

个人推荐工具-富文本中防止XSS攻击: https://jsxss.com/zh/index.html

百度网盘: 

链接：https://pan.baidu.com/s/1ggUmLESkVrkpEqRnG7V0-Q?pwd=sfa7 
提取码：sfa7 
--来自百度网盘超级会员V6的分享

然后解压到项目static包下

2.修改配置文件

修改ueditor.config.js中的 

   serverUrl: "/ueditor/jsp/config.json",

 

 解释一下: 

        当项目打开Ueditor富文本时候,就会加载这个serverUrl找到配置的路径的json内容

        重点注意1.: 在项目中需要设置静态访问的权限 如果加入的有 shiro 可以在拦截器中开放static访问权限如下:

        

 重点注意2.: 在项目中需要设置静态访问的权限 如果没有shiro可以在

                    配置文件application.yml与application.properties中加入mvc的拦截放行:

# 服务器的HTTP端口，默认为8080
server.port=8080
#设置上传文件的最大上传大小
spring.servlet.multipart.max-file-size=10MB
#设置本地静态访问路径(在本电脑D盘下的ueditor文件夹中的文件都可访问以http://localhost:8080/文件名)
# 项目中的static文件夹下的文件都可以访问以 http://localhost:8080/文件名
spring.web.resources.static-locations=file:D:/ueditor,classpath:static

 确保输入url可以直接访问到json文件

 

 2.这样就可以打开ueditor富文本了,不会报错了

        

 3.ueditor中的API和功能介绍

在ueditor文件夹中的index.html文件中,有所有的API的,可以直接学习和使用

 4.ueditor中的图片,视频,文件上传和回显功能实现

        1.在加载显示富文本页面中加入

        

        let ue = UE.getEditor("editor");
        // 对编辑器的操作最好在编辑器ready之后再做
        ue.ready(function() {
            $("#content").html(ue.getContent())
        });

        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            console.log(action, "----------aaaaaaaaaaaa")
            if (action === 'uploadImage') {
                return '/common/getUploadFile';
            } else if (action === 'uploadScrawl') {
                return '/common/getUploadFile';
            } else if (action === 'catchImage') {
                return '/common/getUploadFile';
            }else if (action === 'uploadFile') {
                return '/common/getUploadFile';
            } else if (action === 'uploadVideo') {
                return '/common/getUploadFile';
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }

当然 这里的 action的内容如: uploadImage 必须要和 config.json文件中的

"imageActionName": "uploadImage", /* 执行上传图片的action名称 */ 

是一致的,否则无法找到并且返回上传路径

接下来就是 返回的 上传方法 controller, 创建 类 UeditorToController

@Controller
@RequestMapping("/common")
public class UeditorToController {
    @RequestMapping(value = "/getUploadFile")
    @ResponseBody
    public String imgUpdate(MultipartFile file) {
        if (file.isEmpty()) {
            return "error";
        }
        // 获取文件名
        String fileName = file.getOriginalFilename();
        // 获取文件的后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        // 这里我使用随机字符串来重新命名图片
        fileName = Calendar.getInstance().getTimeInMillis() + suffixName;
        // 这里的路径为Nginx的代理路径，这里是/data/images/xxx.png
        File dest = new File("D:/ueditor/" + fileName);
        // 检测是否存在目录
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdirs();
        }
        try {
            file.transferTo(dest);
            //url的值为图片的实际访问地址 这里我用了Nginx代理，访问的路径是http://localhost/xxx.png
            return "{\"state\": \"SUCCESS\"," +
                    "\"url\": \"" + "http://localhost:8080/" + fileName + "\"," +
                    "\"title\": \"" + fileName + "\"," +
                    "\"original\": \"" + fileName + "\"}";
        } catch (IllegalStateException | IOException e) {
            e.printStackTrace();
        }
        return "error";
    }
}

测试上传并且回显完成!

 

 整合Ueditor富文本完成! 如有哪些地方不完善的,请留言指正,谢谢!