百度富文本编辑器Ueditor 集成springboot(不修改源码)

本文介绍了如何在SpringBoot项目中集成百度富文本编辑器ueditor,重点讲解了不修改ueditor源码的情况下,通过新建配置类来加载ueditor的config.json文件。步骤包括下载ueditor,导入项目,创建返回实体类,配置ueditor的后台请求路径,编写controller处理不同类型的上传请求,以及返回符合ueditor要求的JSON数据格式。示例中详细展示了图片上传的处理过程。
摘要由CSDN通过智能技术生成

项目中使用到百度的富文本编辑器ueditor,网上也有相关的博客做了比较全面的介绍,只是需要较多时间去一一整理,个人认为这其中的难点主要在于加载ueditor的配置文件config.json,网上的教程大概可以分为两种加载方式,一是修改源码直接去读取ueditor的原配置文件,相关教程参考自:很详细的SpringBoot整合UEditor教程;第二种则是通过新建一个config的java类来代替原配置文件,相关教程参考自:springboot集成ueditor富文本编辑器(不需修改ueditor源码)
从ueditor的官网可以看见其相关文件都是放在WEB-INF/lib/目录下面的,所有ueditor自带的jar包里面的默认配置也都是按相关路径去加载的,所以对与像springboot这样结构的项目是加载不了配置文件的,于是解决办法大概就有通过修改ueditor.jar的源代码、通过修改项目的结构以及手动新建加载配置文件的类来实现加载的目的,最后个人觉得通过新添加一个类来实现该功能更合适,所以以下就是对第三种方式进行说明,如有遗漏、错误的地方还请大神们多多指教!

  1. 下载ueditor文件并导入到项目中(使用的是jsp版本);官网地址:点此下载
    下载
  2. 以下是项目结构:
    结构
  3. 将ueditor自带的jar包导入项目;
    导入自带jar包
  4. 新建返回实体类:该实体类的作用是将后台处理的结果返回给前台页面,
package com.jiuding.emergency.entity;

public class Ueditor {
   

    private  String state;
    private  String url;
    private  String title;
    private  String original;

    public Ueditor() {
        super();
    }

    public Ueditor(String state, String url, String title, String original) {
        super();
        this.state = state;
        this.url = url;
        this.title = title;
        this.original = 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;
    }
}

5.新建ueditor的配置文件类,这也是替换原配置文件的关键,以后需要对配置文件的更改也将是在这里进行!!!

package com.jiuding.emergency.common;

public class UeditorConfig {
   
    public final static String UEDITOR_CONFIG = "{
   \n" +
            "    \"imageActionName\": \"uploadimage\",\n" +
            "    \"imageFieldName\": \"upfile\",\n" +
            "    \"imageMaxSize\": 2048000,\n" +
            "    \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
            "    \"imageCompressEnable\": true,\n" +
            "    \"imageCompressBorder\": 1600,\n"
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
百度富文本编辑器UEditor是一款基于JavaScript的所见即所得富文本编辑器,可以轻松地将其集成到Java Web项目中,为用户提供更好的编辑体验。下面简单介绍一下在Java Web项目中使用百度富文本编辑器UEditor的方法。 1.下载UEditor 首先,需要从百度UEditor官网上下载UEditor的源代码。下载地址为:http://ueditor.baidu.com/website/download.html 2.将UEditor集成到Java Web项目中 下载完成后,将UEditor的源代码解压缩,并将解压后的文件夹复制到Java Web项目的WebContent目录下的任意一个子目录中(比如说WebContent/ueditor)。然后,将UEditor中的jsp目录下的所有文件复制到Java Web项目的WebContent目录下的任意一个子目录中(比如说WebContent/jsp)。 3.配置UEditor 在Java Web项目的WebContent目录下新建一个名为config.json的文件,该文件的内容如下: { "imageActionName": "uploadimage", "imageFieldName": "upfile", "imageMaxSize": 2048000, "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "imageCompressEnable": true, "imageCompressBorder": 1600, "imageInsertAlign": "none", "imageUrlPrefix": "", "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlActionName": "uploadscrawl", "scrawlFieldName": "upfile", "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlMaxSize": 2048000, "scrawlUrlPrefix": "", "scrawlInsertAlign": "none", "snapscreenActionName": "uploadimage", "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "snapscreenUrlPrefix": "", "snapscreenInsertAlign": "none", "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage", "catcherFieldName": "source", "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "catcherUrlPrefix": "", "catcherMaxSize": 2048000, "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "videoActionName": "uploadvideo", "videoFieldName": "upfile", "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", "videoUrlPrefix": "", "videoMaxSize": 102400000, "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid" ], "fileActionName": "uploadfile", "fileFieldName": "upfile", "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", "fileUrlPrefix": "", "fileMaxSize": 51200000, "fileAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ], "imageManagerActionName": "listimage", "imageManagerListPath": "/ueditor/jsp/upload/image/", "imageManagerListSize": 20, "imageManagerUrlPrefix": "", "imageManagerInsertAlign": "none", "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "fileManagerActionName": "listfile", "fileManagerListPath": "/ueditor/jsp/upload/file/", "fileManagerUrlPrefix": "", "fileManagerListSize": 20, "fileManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ] } 该文件是UEditor的配置文件,主要配置了上传文件的相关设置。 4.在JSP页面中使用UEditor 在需要使用UEditor的JSP页面中,添加如下代码: <!-- 加载ueditor编辑器js文件 --> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script> <!-- 创建编辑器 --> <script type="text/javascript"> var editor = UE.getEditor('editor'); </script> 其中,ueditor.config.js和ueditor.all.min.js是UEditor的核心文件,需要在页面中引入。editor是页面中一个div元素的id,表示要将该div元素转化为UEditor编辑器。 至此,就完成了在Java Web项目中使用百度富文本编辑器UEditor集成
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值