转载地址:https://blog.csdn.net/sinat_24527911/article/details/78094867
前阵子因项目需要,加入富文本编辑器,货比三家还是决定使用度娘旗下的Ueditor,下载下的jsp版本单独在tomcat上运行没什么问题,但在与springboot整合过程中出现了问题,研究了好久看了好多文档,总算是解决了。
主要问题是在配置信息的获取,前端未获取到config.json文件导致页面在文件/图片上传时无法进行,提示类似“配置信息错误”(错误信息有些忘了,大概这意思吧),不论把config.json文件放在哪都无法使其自行获取。
现在完整描述下我的整合与解决方案:
1、将ueditor项目复制到resourse下的static下;项目结构如图:
2、此时,运行项目,访问:http://lcoalhost:8080/index.html就可以访问Ueditor的一个显示编辑器的demo页面了,此时使用上传功能会发现页面提示:“后端配置不正确”,实际上,当编辑器运行时,会向后端发送一个请求获取配置文件,url定义在ueditor.config.js 的 serverUrl 中。
url默认为xxx/controller.jsp,既然只是获取配置文件,现在访问原url无法获取,那我们就索性写个接口返回配置文件内容好了:
- <code class="language-plain">/**
- * 富文本配置文件获取
- * @param request
- * @return
- */
- @RequestMapping(value = "/config",headers = "Accept=application/json")
- @ResponseBody
- public String imgUpload(HttpServletRequest request,HttpServletResponse response) {
- response.setContentType("application/json;charset=utf-8");
- String config = "/* 前后端通信相关的配置,注释只允许使用多行方式 */\n" +
- "{\n" +
- " /* 上传图片配置项 */\n" +
- " \"imageActionName\": \"uploadimage\", /* 执行上传图片的action名称 */\n" +
- " \"imageFieldName\": \"upfile\", /* 提交的图片表单名称 */\n" +
- " \"imageMaxSize\": 2048000, /* 上传大小限制,单位B */\n" +
- " \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 上传图片格式显示 */\n" +
- " \"imageCompressEnable\": true, /* 是否压缩图片,默认是true */\n" +
- " \"imageCompressBorder\": 1600, /* 图片压缩最长边限制 */\n" +
- " \"imageInsertAlign\": \"none\", /* 插入的图片浮动方式 */\n" +
- " \"imageUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
- " \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
- " /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */\n" +
- " /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */\n" +
- " /* {time} 会替换成时间戳 */\n" +
- " /* {yyyy} 会替换成四位年份 */\n" +
- " /* {yy} 会替换成两位年份 */\n" +
- " /* {mm} 会替换成两位月份 */\n" +
- " /* {dd} 会替换成两位日期 */\n" +
- " /* {hh} 会替换成两位小时 */\n" +
- " /* {ii} 会替换成两位分钟 */\n" +
- " /* {ss} 会替换成两位秒 */\n" +
- " /* 非法字符 \\ : * ? \" < > | */\n" +
- " /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */\n" +
- "\n" +
- " /* 涂鸦图片上传配置项 */\n" +
- " \"scrawlActionName\": \"uploadscrawl\", /* 执行上传涂鸦的action名称 */\n" +
- " \"scrawlFieldName\": \"upfile\", /* 提交的图片表单名称 */\n" +
- " \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
- " \"scrawlMaxSize\": 2048000, /* 上传大小限制,单位B */\n" +
- " \"scrawlUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
- " \"scrawlInsertAlign\": \"none\",\n" +
- "\n" +
- " /* 截图工具上传 */\n" +
- " \"snapscreenActionName\": \"uploadimage\", /* 执行上传截图的action名称 */\n" +
- " \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
- " \"snapscreenUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
- " \"snapscreenInsertAlign\": \"none\", /* 插入的图片浮动方式 */\n" +
- "\n" +
- " /* 抓取远程图片配置 */\n" +
- " \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
- " \"catcherActionName\": \"catchimage\", /* 执行抓取远程图片的action名称 */\n" +
- " \"catcherFieldName\": \"source\", /* 提交的图片列表表单名称 */\n" +
- " \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
- " \"catcherUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
- " \"catcherMaxSize\": 2048000, /* 上传大小限制,单位B */\n" +
- " \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 抓取图片格式显示 */\n" +
- "\n" +
- " /* 上传视频配置 */\n" +
- " \"videoActionName\": \"uploadvideo\", /* 执行上传视频的action名称 */\n" +
- " \"videoFieldName\": \"upfile\", /* 提交的视频表单名称 */\n" +
- " \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
- " \"videoUrlPrefix\": \"\", /* 视频访问路径前缀 */\n" +
- " \"videoMaxSize\": 102400000, /* 上传大小限制,单位B,默认100MB */\n" +
- " \"videoAllowFiles\": [\n" +
- " \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
- " \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"], /* 上传视频格式显示 */\n" +
- "\n" +
- " /* 上传文件配置 */\n" +
- " \"fileActionName\": \"uploadfile\", /* controller里,执行上传视频的action名称 */\n" +
- " \"fileFieldName\": \"upfile\", /* 提交的文件表单名称 */\n" +
- " \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
- " \"fileUrlPrefix\": \"\", /* 文件访问路径前缀 */\n" +
- " \"fileMaxSize\": 51200000, /* 上传大小限制,单位B,默认50MB */\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" +
- " /* 列出指定目录下的图片 */\n" +
- " \"imageManagerActionName\": \"listimage\", /* 执行图片管理的action名称 */\n" +
- " \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\", /* 指定要列出图片的目录 */\n" +
- " \"imageManagerListSize\": 20, /* 每次列出文件数量 */\n" +
- " \"imageManagerUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
- " \"imageManagerInsertAlign\": \"none\", /* 插入的图片浮动方式 */\n" +
- " \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 列出的文件类型 */\n" +
- "\n" +
- " /* 列出指定目录下的文件 */\n" +
- " \"fileManagerActionName\": \"listfile\", /* 执行文件管理的action名称 */\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" +
- "}";
- return config;
- }</code>
(那一长得恶心的要死的字符串就是config.json就是配置文件的内容)
获取到了配置文件就不存在“后端配置错误”这样的信息了。
3、当然,此时文件上传接口没写好,界面上不会提示错误,但还是无法实现上传,上传的逻辑我另外单独写了一篇博文:屠龙刀点击就送
而后只要在配置文件中修改文件上传接口即可