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

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

  1. 下载ueditor文件并导入到项目中(使用的是jsp版本);官网地址:点此下载
    百度富文本编辑器Ueditor 集成springboot(不修改源码)_第1张图片
  2. 以下是项目结构:
    百度富文本编辑器Ueditor 集成springboot(不修改源码)_第2张图片
  3. 将ueditor自带的jar包导入项目;
    百度富文本编辑器Ueditor 集成springboot(不修改源码)_第3张图片
  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" +
            "    \"imageInsertAlign\": \"none\",\n" +
            "    \"imageUrlPrefix\": \"\",\n" +
            "    \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "\n" +
            "    \"scrawlActionName\": \"uploadscrawl\",\n" +
            "    \"scrawlFieldName\": \"upfile\",\n" +
            "    \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"scrawlMaxSize\": 2048000,\n" +
            "    \"scrawlUrlPrefix\": \"\",\n" +
            "    \"scrawlInsertAlign\": \"none\",\n" +
            "\n" +
            "    \"snapscreenActionName\": \"uploadimage\",\n" +
            "    \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"snapscreenUrlPrefix\": \"\",\n" +
            "    \"snapscreenInsertAlign\": \"none\",\n" +
            "\n" +
            "    \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
            "    \"catcherActionName\": \"catchimage\",\n" +
            "    \"catcherFieldName\": \"source\",\n" +
            "    \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"catcherUrlPrefix\": \"\",\n" +
            "    \"catcherMaxSize\": 2048000,\n" +
            "    \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
            "\n" +
            "    \"videoActionName\": \"uploadvideo\",\n" +
            "    \"videoFieldName\": \"upfile\",\n" +
            "    \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"videoUrlPrefix\": \"\",\n" +
            "    \"videoMaxSize\": 102400000,\n" +
            "    \"videoAllowFiles\": [\n" +
            "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
            "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"],\n" +
            "\n" +
            "    \"fileActionName\": \"uploadfile\",\n" +
            "    \"fileFieldName\": \"upfile\",\n" +
            "    \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"fileUrlPrefix\": \"\",\n" +
            "    \"fileMaxSize\": 51200000,\n" +
            "    \"fileAllowFiles\": [\n" +
            "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
            "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
            "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
            "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
            "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
            "    ],\n" +
            "\n" +
            "    \"imageManagerActionName\": \"listimage\",\n" +
            "    \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
            "    \"imageManagerListSize\": 20,\n" +
            "    \"imageManagerUrlPrefix\": \"\",\n" +
            "    \"imageManagerInsertAlign\": \"none\",\n" +
            "    \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
            "\n" +
            "    \"fileManagerActionName\": \"listfile\",\n" +
            "    \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
            "    \"fileManagerUrlPrefix\": \"\",\n" +
            "    \"fileManagerListSize\": 20,\n" +
            "    \"fileManagerAllowFiles\": [\n" +
            "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
            "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
            "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
            "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
            "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
            "    ] \n" +
            "\n" +
            "}";
    /**
     * Ueditor的返回状态类型
     */
    public enum UeditorMsg{
        SUCCESS("SUCCESS"),ERROR("上传失败");
        private String v;
        UeditorMsg(String v){
            this.v =v;
        }
        public String get(){
            return this.v;
        }
    }
}

6.修改ueditor.config.js文件的后台请求路径:

7.后台controller;这里需要说明的是ueditor向后台请求的路径格式是:/ueditor/action=?,这里的?表示页面所提交的文件类型,例如对图片进行上传,则?所对应的就是配置文件中的uploadimage,如果是视频上传,则为uploadvideo,所以在后台则需要通过对action参数的判断来区分是上传的什么类型如下我只对图片上传做了处理,其他类似
百度富文本编辑器Ueditor 集成springboot(不修改源码)_第4张图片
8.另外,需要对后台的返回数据做一下说明,官方要求的格式大概为:{state:”数据状态信息”,url:”图片回显路径”,title:”文件title”,original:”文件名称”,···}的json字符串,所以最后需要将返回的实体类进行json转换再返回,
9.这是最终的效果:
百度富文本编辑器Ueditor 集成springboot(不修改源码)_第5张图片

你可能感兴趣的:(ueditor,springboot)