springboot整合百度富文本编辑器ueditor实现图片上传和文件上传功能

  • springboot整合百度富文本编辑器ueditor实现图片上传和文件上传功能已关闭评论
  • 23 次浏览
  • A+
所属分类:Web前端
摘要

写在前面:在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作:


springboot整合ueditor实现图片上传和文件上传功能

写在前面:

在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作:

springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)https://www.cnblogs.com/rainbow-1/p/16365016.html

在完成对ueditor的基本配置后,图片和文件的上传主要是后端文件的配置,下面简单介绍一下步骤。


一、修改ueditor.config.js配置文件

首先第一步,要完成对配置文件的修改。默认的ueditor配置里,对配置文件的读取是通过controller.jsp完成的,

因为springboot项目中,静态jsp文件的访问是不被允许的,所以我们需要重写这段读取配置文件信息的代码,也就是通过写自己的一个controller来完成这个过程,同时自定义图片和文件上传的位置等信息。

默认的controller.jsp位置如下图:

springboot整合百度富文本编辑器ueditor实现图片上传和文件上传功能

这时候我们修改配置文件调用资源的接口名称,打开ueditor.config.js,如下图所示:

springboot整合百度富文本编辑器ueditor实现图片上传和文件上传功能

我通过server_url,拿到了项目的根路径,然后拼接后面的/science-2.0/api/ueditor/config(项目名称/路由名称)拿到完整的访问路径。

二、编写一个新的控制器(CommonController)

这个类就是我们第一步所修改的部分指向的这个控制器,它要完成对config.json文件(该文件位于jsp文件夹下,里面是关于文件上传的一些配置信息)的读取,同时要完成对文件上传的具体实现。

  • 下面我们先来看一下config.json文件(/jsp目录下)

​ 主要看一下图片上传配置的部分:

springboot整合百度富文本编辑器ueditor实现图片上传和文件上传功能

我们需要修改的部分如图所示:basePath指的是你希望保存的磁盘位置(这个目录最好事先存在),imageActionName是我们处理上传图片功能的那个路由,也就是在controller里是什么,这里就是什么。

下面的文件上传部分类似:

springboot整合百度富文本编辑器ueditor实现图片上传和文件上传功能

  • 下面给出完成的controller代码
import com.alibaba.fastjson.JSONException; import com.baidu.ueditor.ActionEnter; import com.google.common.base.Charsets; import org.apache.commons.io.IOUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.util.ClassUtils; import org.springframework.util.FileCopyUtils; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.util.UUID; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.net.URLDecoder; import java.util.Date; import java.util.HashMap; import java.util.Map; import java.net.URL; @RestController @RequestMapping("/api/ueditor") public class CommonController {     /**      * 判断当前系统是否是Windows系统      * @return true:Windows系统,false:Linux系统      */     private boolean isWindowsSystem(){         String property = System.getProperty("os.name").toLowerCase();         return property.contains("windows");     }      /**      * 获取Ueditor的配置文件      * @return      */     @RequestMapping("/config")     public void getConfigInfo(HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException {         System.out.println("读取ueditor配置文件!");         response.setContentType("application/json");         String rootPath = "";         // 判断当前系统是否是Windows系统         if(isWindowsSystem()){             URL Path = ClassUtils.getDefaultClassLoader().getResource("");             String afterPath = URLDecoder.decode(Path.getPath(), "UTF-8");             rootPath = afterPath+ "static/UEditor/jsp";         } else {             // 将config.json文件放在jar包同级目录下             rootPath = "/usr/local/zgxsoft/yunapp-backend/service";         }         System.out.println("rootPath:{}"+ rootPath);         try {             String exec = new ActionEnter(request, rootPath, "/config.json").exec();             PrintWriter writer = response.getWriter();             writer.write(exec);             writer.flush();             writer.close();         } catch (IOException | JSONException e) {             e.printStackTrace();         }     }       /**      * Ueditor上传文件      * 这里以上传图片为例,图片上传后,imgPath将存储图片的保存路径,返回到编辑器中做展示      * @param upfile      * @return      */      @RequestMapping("uploadimage")     @ResponseBody     public Map<String,String> uploadImage(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) throws IOException {         System.out.println("上传图片!");         //文件原名称         String fileName = upfile.getOriginalFilename();          // 保存文件的新名字          String timeFileName = DateHelper.getDateToString(new Date());         String nowName = timeFileName+"_"+UUID.randomUUID()+fileName.substring(upfile.getOriginalFilename().lastIndexOf("."));         String uploadPath = "";         if(!upfile.isEmpty()){             String path = "D:/science-2.0/";             File f = new File(path);             if(!f.exists()){                 // 第一次上传文件新建文件夹                 f.mkdirs();             }             uploadPath = path+nowName;             //按照路径新建文件             File newFile = new File(uploadPath);             if(!newFile.exists()){                 newFile.createNewFile();             }             //复制             FileCopyUtils.copy(upfile.getBytes(), newFile);         }         //返回结果信息(UEditor官方要求这个json格式)         Map<String,String> map = new HashMap<String,String >();         //是否上传成功         map.put("state", "SUCCESS");         //现在文件名称         map.put("title", nowName);         //文件原名称         map.put("original", fileName);         //文件类型 .+后缀名         map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));         //文件路径         // map.put("url", uploadPath);    // 浏览器不能直接访问项目外目录的图片等文件,需要做虚拟路径映射         map.put("url", "/PathImage/"+nowName);  // 这个路径的 /PathImage/ 是在配置类里指定的映射到本地的绝对路径         //文件大小(字节数)         map.put("size", upfile.getSize()+"");         return map;     }      @RequestMapping("uploadfile")     @ResponseBody     public Map<String,String> uploadfile(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request) throws IOException {         System.out.println("上传文件!");         //文件原名称         String fileName = upfile.getOriginalFilename();          // 保存文件的新名字          String timeFileName = DateHelper.getDateToString(new Date());         String nowName = timeFileName+"_"+UUID.randomUUID()+fileName.substring(upfile.getOriginalFilename().lastIndexOf("."));         //System.out.println("name---:"+nowName);         String uploadPath = "";         if(!upfile.isEmpty()){             String path = "D:/science-2.0/";             File f = new File(path);             if(!f.exists()){                 // 第一次上传文件新建文件夹                 f.mkdirs();             }             uploadPath = path+nowName;             //按照路径新建文件             File newFile = new File(uploadPath);             if(!newFile.exists()){                 newFile.createNewFile();             }             //复制             FileCopyUtils.copy(upfile.getBytes(), newFile);         }         //返回结果信息(UEditor官方要求这个json格式)         Map<String,String> map = new HashMap<String,String >();         //是否上传成功         map.put("state", "SUCCESS");         //现在文件名称         map.put("title", nowName);         //文件原名称         map.put("original", fileName);         //文件类型 .+后缀名         map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));         //文件路径         // map.put("url", uploadPath);    // 浏览器不能直接访问项目外目录的图片等文件,需要做虚拟路径映射         map.put("url", "/PathFile/"+nowName);  // 这个路径的 /PathImage/ 是在配置类里指定的映射到本地的绝对路径         //文件大小(字节数)         map.put("size", upfile.getSize()+"");         return map;     } } 

这部分代码里面的内容简单说一下:

  1. /api/ueditor/config,这个路径是我们读取config.json文件的地方,在这里我们完成了对json文件的加载,这时候我们在点击控件上的上传按钮才可以被监听到,那么我们后面重写的图片和文件上传的路径才有了意义。
  2. /api/ueditor/uploadimage,这个路径就是写图片上传的部分,这部分代码注释比较详细,读者可以仔细阅读。
  3. /api/ueditor/uploadfile,这个就是文件上传的部分,和图片类似(图片实际上也是属于文件范畴)

!!!!!!

划重点:

下面还需要完成一个重要的配置,我们目前完成的只是对文件的上传存储到磁盘的功能,但是我们还有一件事也很重要,那就是回显,所谓回显,就是把图片和文件等对前端提供展示。那么这部分要怎么写呢,其实道理很简单,就是对本地磁盘的文件提供一个访问的路径就可以了。

我们回到最开始的话题,我们现在做的事情其实是放弃了控件原有的controller,而自己写了一个新的,这是因为springboot框架的访问限制,那么图片和文件的回显也就需要我们自己写不可以直接用config.json中的默认配置,因为那里其实已经不能用了,我们要重写就得重写得彻彻底底。

默认是这样的:

"imageUrlPrefix":"", /* 图片访问路径前缀 */ "imagePathFormat": "/document/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */                             /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */                             /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */                             /* {time} 会替换成时间戳 */                             /* {yyyy} 会替换成四位年份 */                             /* {yy} 会替换成两位年份 */                             /* {mm} 会替换成两位月份 */                             /* {dd} 会替换成两位日期 */                             /* {hh} 会替换成两位小时 */                             /* {ii} 会替换成两位分钟 */                             /* {ss} 会替换成两位秒 */                             /* 非法字符  : * ? " < > | */                             /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */      

ueditor为我们提供了重写之后需要给服务器返回数据的格式:

{     "state": "SUCCESS",     "url": "upload/demo.jpg",     "title": "demo.jpg",     "original": "demo.jpg" } //这是官网提供的格式,我们还可以再加一些,比如上面的controller是这么写的: //返回结果信息(UEditor官方要求这个json格式)         Map<String,String> map = new HashMap<String,String >();         //是否上传成功         map.put("state", "SUCCESS");         //现在文件名称         map.put("title", nowName);         //文件原名称         map.put("original", fileName);         //文件类型 .+后缀名         map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));         //文件路径         // map.put("url", uploadPath);    // 浏览器不能直接访问项目外目录的图片等文件,需要做虚拟路径映射         map.put("url", "/PathFile/"+nowName);  // 这个路径的 /PathImage/ 是在配置类里指定的映射到本地的绝对路径         //文件大小(字节数)         map.put("size", upfile.getSize()+""); 

注意看map.put("url", "/PathFile/"+nowName);这段代码

这段代码完成的就是对应本地文件路径的服务器访问路径,所以我们需要再写一个映射器文件完成对这个路径的映射关系。

import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class MyWebAppConfiguration extends WebMvcConfigurerAdapter {     /**      * Spring Boot中有默认的静态资源访问路径,浏览器也不允许访问项目目录外的资源文件      * 添加一些虚拟路径的映射      * 设置静态资源路径和上传文件的路径      */     @Override     public void addResourceHandlers(ResourceHandlerRegistry registry) {         // /** 表示该目录下所有文件         registry.addResourceHandler("/PathImage/**").addResourceLocations("file:/D:/science-2.0/");         registry.addResourceHandler("/PathFile/**").addResourceLocations("file:/D:/science-2.0/");         super.addResourceHandlers(registry);     } } 

其中由于文件名的日期后缀是根据当前系统时间生成的,所以又封装了一个日期类,代码如下:

import java.text.SimpleDateFormat; import java.util.Date;  public class DateHelper {     public static String getDateToString(Date time) {         SimpleDateFormat formatter;         formatter = new SimpleDateFormat("yyyyMMddHHmmss");         String Time = formatter.format(time);         return Time;     } } 

小结一下

这里我们主要在写后端的代码,我们一共需要三个类:一个是主控制器,一个是映射关系类,还有一个是日期处理类(这三个文件放一起就行)。注意里面的一些关键路径,和config.json里的路径是一一对应的,一旦写错服务器是无法访问到的。还有映射关系类里的路径也需要写正确,否则服务器只能完成对文件的上传而无法完成对文件的回显。


附ueditor.config.js

/**  * ueditor完整配置项  * 可以在这里配置整个编辑器的特性  */ /**************************提示********************************  * 所有被注释的配置项均为UEditor默认值。  * 修改默认配置请首先确保已经完全明确该参数的真实用途。  * 主要有两种修改方案,一种是取消此处注释,然后修改成对应参数;另一种是在实例化编辑器时传入对应参数。  * 当升级编辑器时,可直接使用旧版配置文件替换新版配置文件,不用担心旧版配置文件中因缺少新功能所需的参数而导致脚本报错。  **************************提示********************************/  (function () {      /**      * 编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。      * 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。      * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。      * 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。      * 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。      * 当然,需要令此处的URL等于对应的配置。      * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";      */    window.UEDITOR_HOME_URL = "/UEditor/";       var server_url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port;     //alert("rul"+server_url);     /**      * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。      */     var ser_url=server_url+"/api/ueditor/config";     var ip=window.location.hostname;     if(ip=="10.1.10.148"){         window.UEDITOR_HOME_URL = "/science-2.0/UEditor/";         ser_url= server_url+"/science-2.0/api/ueditor/config";     }     var URL = window.UEDITOR_HOME_URL || getUEBasePath();     window.UEDITOR_CONFIG = {          //为编辑器实例添加一个路径,这个不能被注释         UEDITOR_HOME_URL: URL          // 服务器统一请求接口路径         , serverUrl:  ser_url          //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义         , toolbars: [[             'undo', 'redo', '|', 'bold', 'italic',              'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript',              'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain',              '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist',              'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight',              '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr',              'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright',             'justifyjustify', '|', 'touppercase', 'tolowercase', '|','link', 'unlink', 'anchor',              '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload',             'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map',              'pagebreak', 'template','|','horizontal', 'date', 'time', 'spechars', '|',             'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow',             'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells',             'splittorows', 'splittocols', 'charts', '|', 'preview', 'searchreplace'         ]]         //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准         //,labelMap:{         //    'anchor':'', 'undo':''         //}          //语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换,当然,前提条件是lang文件夹下存在对应的语言文件:         //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()         //,lang:"zh-cn"         //,langPath:URL +"lang/"          //主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换,当然,前提条件是themes文件夹下存在对应的主题文件:         //现有如下皮肤:default         //,theme:'default'         //,themePath:URL +"themes/"          //,zIndex : 900     //编辑器层级的基数,默认是900          //针对getAllHtml方法,会在对应的head标签中增加该编码设置。         //,charset:"utf-8"          //若实例化编辑器的页面手动修改的domain,此处需要设置为true         //,customDomain:false          //常用配置项目         //,isShow : true    //默认显示编辑器          //,textarea:'editorValue' // 提交表单时,服务器获取编辑器提交内容的所用的参数,多实例时可以给容器name属性,会将name给定的值最为每个实例的键值,不用每次实例化的时候都设置这个值          //,initialContent:'欢迎使用ueditor!'    //初始化编辑器的内容,也可以通过textarea/script给值,看官网例子          //,autoClearinitialContent:true //是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了          //,focus:false //初始化时,是否让编辑器获得焦点true或false          //如果自定义,最好给p标签如下的行高,要不输入中文时,会有跳动感         //,initialStyle:'p{line-height:1em}'//编辑器层级的基数,可以用来改变字体等          //,iframeCssUrl: URL + '/themes/iframe.css' //给编辑区域的iframe引入一个css文件          //indentValue         //首行缩进距离,默认是2em         //,indentValue:'2em'          //,initialFrameWidth:1000  //初始化编辑器宽度,默认1000         //,initialFrameHeight:320  //初始化编辑器高度,默认320          //,readonly : false //编辑器初始化结束后,编辑区域是否是只读的,默认是false          //,autoClearEmptyNode : true //getContent时,是否删除空的inlineElement节点(包括嵌套的情况)          //启用自动保存         //,enableAutoSave: true         //自动保存间隔时间, 单位ms         //,saveInterval: 500          //,fullscreen : false //是否开启初始化时即全屏,默认关闭          //,imagePopup:true      //图片操作的浮层开关,默认打开          //,autoSyncData:true //自动同步编辑器要提交的数据         //,emotionLocalization:false //是否开启表情本地化,默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹          //粘贴只保留标签,去除标签所有属性         //,retainOnlyLabelPasted: false          //,pasteplain:false  //是否默认为纯文本粘贴。false为不使用纯文本粘贴,true为使用纯文本粘贴         //纯文本粘贴模式下的过滤规则         //'filterTxtRules' : function(){         //    function transP(node){         //        node.tagName = 'p';         //        node.setStyle();         //    }         //    return {         //        //直接删除及其字节点内容         //        '-' : 'script style object iframe embed input select',         //        'p': {$:{}},         //        'br':{$:{}},         //        'div':{'$':{}},         //        'li':{'$':{}},         //        'caption':transP,         //        'th':transP,         //        'tr':transP,         //        'h1':transP,'h2':transP,'h3':transP,'h4':transP,'h5':transP,'h6':transP,         //        'td':function(node){         //            //没有内容的td直接删掉         //            var txt = !!node.innerText();         //            if(txt){         //                node.parentNode.insertAfter(UE.uNode.createText(' &nbsp; &nbsp;'),node);         //            }         //            node.parentNode.removeChild(node,node.innerText())         //        }         //    }         //}()          //,allHtmlEnabled:false //提交到后台的数据是否包含整个html字符串          //insertorderedlist         //有序列表的下拉配置,值留空时支持多语言自动识别,若配置值,则以此值为准         //,'insertorderedlist':{         //      //自定的样式         //        'num':'1,2,3...',         //        'num1':'1),2),3)...',         //        'num2':'(1),(2),(3)...',         //        'cn':'一,二,三....',         //        'cn1':'一),二),三)....',         //        'cn2':'(一),(二),(三)....',         //     //系统自带         //     'decimal' : '' ,         //'1,2,3...'         //     'lower-alpha' : '' ,    // 'a,b,c...'         //     'lower-roman' : '' ,    //'i,ii,iii...'         //     'upper-alpha' : '' , lang   //'A,B,C'         //     'upper-roman' : ''      //'I,II,III...'         //}          //insertunorderedlist         //无序列表的下拉配置,值留空时支持多语言自动识别,若配置值,则以此值为准         //,insertunorderedlist : { //自定的样式         //    'dash' :'— 破折号', //-破折号         //    'dot':' 。 小圆圈', //系统自带         //    'circle' : '',  // '○ 小圆圈'         //    'disc' : '',    // '● 小圆点'         //    'square' : ''   //'■ 小方块'         //}         //,listDefaultPaddingLeft : '30'//默认的左边缩进的基数倍         //,listiconpath : 'http://bs.baidu.com/listicon/'//自定义标号的路径         //,maxListLevel : 3 //限制可以tab的级数, 设置-1为不限制          //,autoTransWordToList:false  //禁止word中粘贴进来的列表自动变成列表标签          //fontfamily         //字体设置 label留空支持多语言自动切换,若配置,则以配置值为准         ,'fontfamily':[             { label:'',name:'songti',val:'宋体,SimSun'},             { label: '', name: 'SimSun', val: '仿宋,SimSun' },             { label:'',name:'FangSong_GB2312',val:'仿宋_GB2312 ,FangSong_GB2312'},             { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},             { label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},             { label:'',name:'heiti',val:'黑体, SimHei'},             { label:'',name:'lishu',val:'隶书, SimLi'},             { label:'',name:'andaleMono',val:'andale mono'},             { label:'',name:'arial',val:'arial, helvetica,sans-serif'},             { label:'',name:'arialBlack',val:'arial black,avant garde'},             { label:'',name:'comicSansMs',val:'comic sans ms'},             { label:'',name:'impact',val:'impact,chicago'},             { label:'',name:'timesNewRoman',val:'times new roman'}         ]          //fontsize         //字号         //,'fontsize':[10, 11, 12, 14, 16, 18, 20, 24, 36]          //paragraph         //段落格式 值留空时支持多语言自动识别,若配置,则以配置值为准         //,'paragraph':{'p':'', 'h1':'', 'h2':'', 'h3':'', 'h4':'', 'h5':'', 'h6':''}          //rowspacingtop         //段间距 值和显示的名字相同         //,'rowspacingtop':['5', '10', '15', '20', '25']          //rowspacingBottom         //段间距 值和显示的名字相同         //,'rowspacingbottom':['5', '10', '15', '20', '25']          //lineheight         //行内间距 值和显示的名字相同         //,'lineheight':['1', '1.5','1.75','2', '3', '4', '5']          //customstyle         //自定义样式,不支持国际化,此处配置值即可最后显示值         //block的元素是依据设置段落的逻辑设置的,inline的元素依据BIU的逻辑设置         //尽量使用一些常用的标签         //参数说明         //tag 使用的标签名字         //label 显示的名字也是用来标识不同类型的标识符,注意这个值每个要不同,         //style 添加的样式         //每一个对象就是一个自定义的样式         //,'customstyle':[         //    {tag:'h1', name:'tc', label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'},         //    {tag:'h1', name:'tl',label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:0 0 10px 0;'},         //    {tag:'span',name:'im', label:'', style:'font-style:italic;font-weight:bold'},         //    {tag:'span',name:'hi', label:'', style:'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'}         //]          //打开右键菜单功能         //,enableContextMenu: true         //右键菜单的内容,可以参考plugins/contextmenu.js里边的默认菜单的例子,label留空支持国际化,否则以此配置为准         //,contextMenu:[         //    {         //        label:'',       //显示的名称         //        cmdName:'selectall',//执行的command命令,当点击这个右键菜单时         //        //exec可选,有了exec就会在点击时执行这个function,优先级高于cmdName         //        exec:function () {         //            //this是当前编辑器的实例         //            //this.ui._dialogs['inserttableDialog'].open();         //        }         //    }         //]          //快捷菜单         //,shortcutMenu:["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist"]          //elementPathEnabled         //是否启用元素路径,默认是显示         //,elementPathEnabled : true          //wordCount         //,wordCount:true          //是否开启字数统计         //,maximumWords:10000       //允许的最大字符数         //字数统计提示,{#count}代表当前字数,{#leave}代表还可以输入多少字符数,留空支持多语言自动切换,否则按此配置显示         //,wordCountMsg:''   //当前已输入 {#count} 个字符,您还可以输入{#leave} 个字符         //超出字数限制提示  留空支持多语言自动切换,否则按此配置显示         //,wordOverFlowMsg:''    //<span style="color:red;">你输入的字符个数已经超出最大允许值,服务器可能会拒绝保存!</span>          //tab         //点击tab键时移动的距离,tabSize倍数,tabNode什么字符做为单位         //,tabSize:4         //,tabNode:'&nbsp;'          //removeFormat         //清除格式时可以删除的标签和属性         //removeForamtTags标签         //,removeFormatTags:'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var'         //removeFormatAttributes属性         //,removeFormatAttributes:'class,style,lang,width,height,align,hspace,valign'          //undo         //可以最多回退的次数,默认20         //,maxUndoCount:20         //当输入的字符数超过该值时,保存一次现场         //,maxInputCount:1          //autoHeightEnabled         // 是否自动长高,默认true         //,autoHeightEnabled:true          //scaleEnabled         //是否可以拉伸长高,默认true(当开启时,自动长高失效)         //,scaleEnabled:false         //,minFrameWidth:800    //编辑器拖动时最小宽度,默认800         //,minFrameHeight:220  //编辑器拖动时最小高度,默认220          //autoFloatEnabled         //是否保持toolbar的位置不动,默认true         //,autoFloatEnabled:true         //浮动时工具栏距离浏览器顶部的高度,用于某些具有固定头部的页面         //,topOffset:30         //编辑器底部距离工具栏高度(如果参数大于等于编辑器高度,则设置无效)         //,toolbarTopOffset:400          //设置远程图片是否抓取到本地保存         //,catchRemoteImageEnable: true //设置是否抓取远程图片          //pageBreakTag         //分页标识符,默认是_ueditor_page_break_tag_         //,pageBreakTag:'_ueditor_page_break_tag_'          //autotypeset         //自动排版参数         //,autotypeset: {         //    mergeEmptyline: true,           //合并空行         //    removeClass: true,              //去掉冗余的class         //    removeEmptyline: false,         //去掉空行         //    textAlign:"left",               //段落的排版方式,可以是 left,right,center,justify 去掉这个属性表示不执行排版         //    imageBlockLine: 'center',       //图片的浮动方式,独占一行剧中,左右浮动,默认: center,left,right,none 去掉这个属性表示不执行排版         //    pasteFilter: false,             //根据规则过滤没事粘贴进来的内容         //    clearFontSize: false,           //去掉所有的内嵌字号,使用编辑器默认的字号         //    clearFontFamily: false,         //去掉所有的内嵌字体,使用编辑器默认的字体         //    removeEmptyNode: false,         // 去掉空节点         //    //可以去掉的标签         //    removeTagNames: {标签名字:1},         //    indent: false,                  // 行首缩进         //    indentValue : '2em',            //行首缩进的大小         //    bdc2sb: false,         //    tobdc: false         //}          //tableDragable         //表格是否可以拖拽         //,tableDragable: true            //sourceEditor         //源码的查看方式,codemirror 是代码高亮,textarea是文本框,默认是codemirror         //注意默认codemirror只能在ie8+和非ie中使用         //,sourceEditor:"codemirror"         //如果sourceEditor是codemirror,还用配置一下两个参数         //codeMirrorJsUrl js加载的路径,默认是 URL + "third-party/codemirror/codemirror.js"         //,codeMirrorJsUrl:URL + "third-party/codemirror/codemirror.js"         //codeMirrorCssUrl css加载的路径,默认是 URL + "third-party/codemirror/codemirror.css"         //,codeMirrorCssUrl:URL + "third-party/codemirror/codemirror.css"         //编辑器初始化完成后是否进入源码模式,默认为否。         //,sourceEditorFirst:false          //iframeUrlMap         //dialog内容的路径 ~会被替换成URL,垓属性一旦打开,将覆盖所有的dialog的默认路径         //,iframeUrlMap:{         //    'anchor':'~/dialogs/anchor/anchor.html',         //}          //allowLinkProtocol 允许的链接地址,有这些前缀的链接地址不会自动添加http         //, allowLinkProtocols: ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:', 'git:', 'svn:']          //webAppKey 百度应用的APIkey,每个站长必须首先去百度官网注册一个key后方能正常使用app功能,注册介绍,http://app.baidu.com/static/cms/getapikey.html         //, webAppKey: ""          //默认过滤规则相关配置项目         //,disabledTableInTable:true  //禁止表格嵌套         //,allowDivTransToP:true      //允许进入编辑器的div标签自动变成p标签         //,rgb2Hex:true               //默认产出的数据中的color自动从rgb格式变成16进制格式        // xss 过滤是否开启,inserthtml等操作       ,xssFilterRules: true       //input xss过滤       ,inputXssFilter: true       //output xss过滤       ,outputXssFilter: true       // xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js       ,whitList: {          iframe: ['frameborder','border','marginwidth','marginheight','width','height','src','id'],//宋雨佳增加这一行          a:      ['target', 'href', 'title', 'class', 'style'],          abbr:   ['title', 'class', 'style'],          address: ['class', 'style'],          area:   ['shape', 'coords', 'href', 'alt'],          article: [],          aside:  [],          audio:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'],          b:      ['class', 'style'],          bdi:    ['dir'],          bdo:    ['dir'],          big:    [],          blockquote: ['cite', 'class', 'style'],          br:     [],          caption: ['class', 'style'],          center: [],          cite:   [],          code:   ['class', 'style'],          col:    ['align', 'valign', 'span', 'width', 'class', 'style'],          colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],          dd:     ['class', 'style'],          del:    ['datetime'],          details: ['open'],          div:    ['class', 'style'],          dl:     ['class', 'style'],          dt:     ['class', 'style'],          em:     ['class', 'style'],          font:   ['color', 'size', 'face'],          footer: [],          h1:     ['class', 'style'],          h2:     ['class', 'style'],          h3:     ['class', 'style'],          h4:     ['class', 'style'],          h5:     ['class', 'style'],          h6:     ['class', 'style'],          header: [],          hr:     [],          i:      ['class', 'style'],          img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],          ins:    ['datetime'],          li:     ['class', 'style'],          mark:   [],          nav:    [],          ol:     ['class', 'style'],          p:      ['class', 'style'],          pre:    ['class', 'style'],          s:      [],          section:[],          small:  [],          span:   ['class', 'style'],          sub:    ['class', 'style'],          sup:    ['class', 'style'],          strong: ['class', 'style'],          table:  ['width', 'border', 'align', 'valign', 'class', 'style'],          tbody:  ['align', 'valign', 'class', 'style'],          td:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],          tfoot:  ['align', 'valign', 'class', 'style'],          th:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],          thead:  ['align', 'valign', 'class', 'style'],          tr:     ['rowspan', 'align', 'valign', 'class', 'style'],          tt:     [],          u:      [],          ul:     ['class', 'style'],          video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']       }     };      function getUEBasePath(docUrl, confUrl) {          return getBasePath(docUrl || self.document.URL || self.location.href, confUrl || getConfigFilePath());      }      function getConfigFilePath() {          var configPath = document.getElementsByTagName('script');          return configPath[ configPath.length - 1 ].src;      }      function getBasePath(docUrl, confUrl) {          var basePath = confUrl;           if (/^(/|\\)/.test(confUrl)) {              basePath = /^.+?w(/|\\)/.exec(docUrl)[0] + confUrl.replace(/^(/|\\)/, '');          } else if (!/^[a-z]+:/i.test(confUrl)) {              docUrl = docUrl.split("#")[0].split("?")[0].replace(/[^\/]+$/, '');              basePath = docUrl + "" + confUrl;          }          return optimizationPath(basePath);      }      function optimizationPath(path) {          var protocol = /^[a-z]+:///.exec(path)[ 0 ],             tmp = null,             res = [];          path = path.replace(protocol, "").split("?")[0].split("#")[0];          path = path.replace(/\/g, '/').split(///);          path[ path.length - 1 ] = "";          while (path.length) {              if (( tmp = path.shift() ) === "..") {                 res.pop();             } else if (tmp !== ".") {                 res.push(tmp);             }          }          return protocol + res.join("/");      }      window.UE = {         getUEBasePath: getUEBasePath     };  })(); 

附config.json

/* 前后端通信相关的配置,注释只允许使用多行方式 */ {     "basePath": "D:/scinece-2.0",     /* 上传图片配置项 */     "imageActionName": "uploadimage", /* 执行上传图片的action名称 */     "imageFieldName": "upfile", /* 提交的图片表单名称 */     "imageMaxSize": 2048000, /* 上传大小限制,单位B  */     "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */     "imageCompressEnable": true, /* 是否压缩图片,默认是true */     "imageCompressBorder": 1600, /* 图片压缩最长边限制 */     "imageInsertAlign": "none", /* 插入的图片浮动方式 */     "imageUrlPrefix":"", /* 图片访问路径前缀 */     "imagePathFormat": "/document/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */                                 /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */                                 /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */                                 /* {time} 会替换成时间戳 */                                 /* {yyyy} 会替换成四位年份 */                                 /* {yy} 会替换成两位年份 */                                 /* {mm} 会替换成两位月份 */                                 /* {dd} 会替换成两位日期 */                                 /* {hh} 会替换成两位小时 */                                 /* {ii} 会替换成两位分钟 */                                 /* {ss} 会替换成两位秒 */                                 /* 非法字符  : * ? " < > | */                                 /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */      /* 涂鸦图片上传配置项 */     "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */     "scrawlFieldName": "upfile", /* 提交的图片表单名称 */     "scrawlPathFormat": "/document/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */     "scrawlMaxSize": 2048000, /* 上传大小限制,单位B */     "scrawlUrlPrefix":"", /* 图片访问路径前缀 */     "scrawlInsertAlign": "none",      /* 截图工具上传 */     "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */     "snapscreenPathFormat": "/document/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */     "snapscreenUrlPrefix":"", /* 图片访问路径前缀 */     "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */      /* 抓取远程图片配置 */     "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],     "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */     "catcherFieldName": "source", /* 提交的图片列表表单名称 */     "catcherPathFormat": "/document/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */     "catcherUrlPrefix":"", /* 图片访问路径前缀 */     "catcherMaxSize": 2048000, /* 上传大小限制,单位B */     "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */      /* 上传视频配置 */     "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */     "videoFieldName": "upfile", /* 提交的视频表单名称 */     "videoPathFormat": "/document/ueditor/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */     "videoUrlPrefix": "", /* 视频访问路径前缀 */     "videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */     "videoAllowFiles": [         ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",         ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */      /* 上传文件配置 */     "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */     "fileFieldName": "upfile", /* 提交的文件表单名称 */     "filePathFormat": "/document/ueditor/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */     "fileUrlPrefix":"", /* 文件访问路径前缀 */     "fileMaxSize": 307200000, /* 上传大小限制,单位B,默认50MB */     "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", /* 执行图片管理的action名称 */     "imageManagerListPath": "/document/ueditor/image/", /* 指定要列出图片的目录 */     "imageManagerListSize": 20, /* 每次列出文件数量 */     "imageManagerUrlPrefix":"", /* 图片访问路径前缀 */     "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */     "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */      /* 列出指定目录下的文件 */     "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */     "fileManagerListPath": "/document/ueditor/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"     ] /* 列出的文件类型 */  } 

注意点 1 :如果你是按照我的上一篇随笔完成的对ueditor的初始配置,那么在你引入ueditor控件的那个html文件里,一定存在这么一段代码:

<script type="text/javascript">     window.UEDITOR_HOME_URL = "/UEditor/"; </script> 

这次在ueditor.config.js文件中,我指定了这个路径,所以在页面里的这个声明就可以去掉了。而且我留着这里是存在问题的,当然我不太确定是不是这里导致的问题,如果大家配置完没有问题,那这里保留着也可以。

注意点 2 :这里面有几个路径需要再提醒一下

在CommonController中: @RequestMapping("uploadimage")和 @RequestMapping("uploadfile") 需要和 config.json中的imageActionName一一对应。

config.json中:"basePath": "D:/scinece-2.0" 需要是你保存在磁盘的路径,当然这里好像不改也行,因为这里被新写的controller覆盖了,可以尝试不改看看有没有问题,博主保险起见就一起改了。

CommonController 中的 map.put("url", "/PathFile/"+nowName);需要和映射器类的registry.addResourceHandler("/PathImage/**").addResourceLocations("file:/D:/science-2.0/"); 一一对应

CommonController 中的 rootPath = afterPath+ "static/UEditor/jsp";是相对于项目的classpath的路径

对于SpringBoot项目来说,classpath指的是src.main.java和src.main.resources路径以及第三方jar包的根路径,存放在这两个路径下的文件,都可以通过classpath作为相对路径来引用;

因为在maven项目打包之后,会将项目变成如下图所示的路径,也就是说 /java 和 /resources 这两个文件夹所在的路径会消失springboot项目会直接识别这两个文件夹里面的内容,****所以我们写路径的时候就直接可以从 resources 目录的下一级开始,比如从/static或者 /template等等开始。

springboot整合百度富文本编辑器ueditor实现图片上传和文件上传功能

分享完毕,有不准确的地方大家交流指正,希望对大家有帮助!