spring Boot + Ueditor整合

转载地址: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无法获取,那我们就索性写个接口返回配置文件内容好了:

[java] view plain copy
  1. <code class="language-plain">/** 
  2.      * 富文本配置文件获取 
  3.      * @param request 
  4.      * @return 
  5.      */  
  6.     @RequestMapping(value = "/config",headers = "Accept=application/json")  
  7.     @ResponseBody  
  8.     public String imgUpload(HttpServletRequest request,HttpServletResponse response) {  
  9.         response.setContentType("application/json;charset=utf-8");  
  10.         String config = "/* 前后端通信相关的配置,注释只允许使用多行方式 */\n" +  
  11.                 "{\n" +  
  12.                 "    /* 上传图片配置项 */\n" +  
  13.                 "    \"imageActionName\": \"uploadimage\", /* 执行上传图片的action名称 */\n" +  
  14.                 "    \"imageFieldName\": \"upfile\", /* 提交的图片表单名称 */\n" +  
  15.                 "    \"imageMaxSize\": 2048000, /* 上传大小限制,单位B */\n" +  
  16.                 "    \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 上传图片格式显示 */\n" +  
  17.                 "    \"imageCompressEnable\": true, /* 是否压缩图片,默认是true */\n" +  
  18.                 "    \"imageCompressBorder\": 1600, /* 图片压缩最长边限制 */\n" +  
  19.                 "    \"imageInsertAlign\": \"none\", /* 插入的图片浮动方式 */\n" +  
  20.                 "    \"imageUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +  
  21.                 "    \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +  
  22.                 "                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */\n" +  
  23.                 "                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */\n" +  
  24.                 "                                /* {time} 会替换成时间戳 */\n" +  
  25.                 "                                /* {yyyy} 会替换成四位年份 */\n" +  
  26.                 "                                /* {yy} 会替换成两位年份 */\n" +  
  27.                 "                                /* {mm} 会替换成两位月份 */\n" +  
  28.                 "                                /* {dd} 会替换成两位日期 */\n" +  
  29.                 "                                /* {hh} 会替换成两位小时 */\n" +  
  30.                 "                                /* {ii} 会替换成两位分钟 */\n" +  
  31.                 "                                /* {ss} 会替换成两位秒 */\n" +  
  32.                 "                                /* 非法字符 \\ : * ? \" < > | */\n" +  
  33.                 "                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */\n" +  
  34.                 "\n" +  
  35.                 "    /* 涂鸦图片上传配置项 */\n" +  
  36.                 "    \"scrawlActionName\": \"uploadscrawl\", /* 执行上传涂鸦的action名称 */\n" +  
  37.                 "    \"scrawlFieldName\": \"upfile\", /* 提交的图片表单名称 */\n" +  
  38.                 "    \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +  
  39.                 "    \"scrawlMaxSize\": 2048000, /* 上传大小限制,单位B */\n" +  
  40.                 "    \"scrawlUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +  
  41.                 "    \"scrawlInsertAlign\": \"none\",\n" +  
  42.                 "\n" +  
  43.                 "    /* 截图工具上传 */\n" +  
  44.                 "    \"snapscreenActionName\": \"uploadimage\", /* 执行上传截图的action名称 */\n" +  
  45.                 "    \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +  
  46.                 "    \"snapscreenUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +  
  47.                 "    \"snapscreenInsertAlign\": \"none\", /* 插入的图片浮动方式 */\n" +  
  48.                 "\n" +  
  49.                 "    /* 抓取远程图片配置 */\n" +  
  50.                 "    \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +  
  51.                 "    \"catcherActionName\": \"catchimage\", /* 执行抓取远程图片的action名称 */\n" +  
  52.                 "    \"catcherFieldName\": \"source\", /* 提交的图片列表表单名称 */\n" +  
  53.                 "    \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +  
  54.                 "    \"catcherUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +  
  55.                 "    \"catcherMaxSize\": 2048000, /* 上传大小限制,单位B */\n" +  
  56.                 "    \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 抓取图片格式显示 */\n" +  
  57.                 "\n" +  
  58.                 "    /* 上传视频配置 */\n" +  
  59.                 "    \"videoActionName\": \"uploadvideo\", /* 执行上传视频的action名称 */\n" +  
  60.                 "    \"videoFieldName\": \"upfile\", /* 提交的视频表单名称 */\n" +  
  61.                 "    \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +  
  62.                 "    \"videoUrlPrefix\": \"\", /* 视频访问路径前缀 */\n" +  
  63.                 "    \"videoMaxSize\": 102400000, /* 上传大小限制,单位B,默认100MB */\n" +  
  64.                 "    \"videoAllowFiles\": [\n" +  
  65.                 "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +  
  66.                 "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"], /* 上传视频格式显示 */\n" +  
  67.                 "\n" +  
  68.                 "    /* 上传文件配置 */\n" +  
  69.                 "    \"fileActionName\": \"uploadfile\", /* controller里,执行上传视频的action名称 */\n" +  
  70.                 "    \"fileFieldName\": \"upfile\", /* 提交的文件表单名称 */\n" +  
  71.                 "    \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +  
  72.                 "    \"fileUrlPrefix\": \"\", /* 文件访问路径前缀 */\n" +  
  73.                 "    \"fileMaxSize\": 51200000, /* 上传大小限制,单位B,默认50MB */\n" +  
  74.                 "    \"fileAllowFiles\": [\n" +  
  75.                 "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +  
  76.                 "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +  
  77.                 "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +  
  78.                 "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +  
  79.                 "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +  
  80.                 "    ], /* 上传文件格式显示 */\n" +  
  81.                 "\n" +  
  82.                 "    /* 列出指定目录下的图片 */\n" +  
  83.                 "    \"imageManagerActionName\": \"listimage\", /* 执行图片管理的action名称 */\n" +  
  84.                 "    \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\", /* 指定要列出图片的目录 */\n" +  
  85.                 "    \"imageManagerListSize\": 20, /* 每次列出文件数量 */\n" +  
  86.                 "    \"imageManagerUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +  
  87.                 "    \"imageManagerInsertAlign\": \"none\", /* 插入的图片浮动方式 */\n" +  
  88.                 "    \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 列出的文件类型 */\n" +  
  89.                 "\n" +  
  90.                 "    /* 列出指定目录下的文件 */\n" +  
  91.                 "    \"fileManagerActionName\": \"listfile\", /* 执行文件管理的action名称 */\n" +  
  92.                 "    \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\", /* 指定要列出文件的目录 */\n" +  
  93.                 "    \"fileManagerUrlPrefix\": \"\", /* 文件访问路径前缀 */\n" +  
  94.                 "    \"fileManagerListSize\": 20, /* 每次列出文件数量 */\n" +  
  95.                 "    \"fileManagerAllowFiles\": [\n" +  
  96.                 "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +  
  97.                 "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +  
  98.                 "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +  
  99.                 "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +  
  100.                 "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +  
  101.                 "    ] /* 列出的文件类型 */\n" +  
  102.                 "\n" +  
  103.                 "}";  
  104.         return config;  
  105.     }</code>  

(那一长得恶心的要死的字符串就是config.json就是配置文件的内容)

获取到了配置文件就不存在“后端配置错误”这样的信息了。

3、当然,此时文件上传接口没写好,界面上不会提示错误,但还是无法实现上传,上传的逻辑我另外单独写了一篇博文:屠龙刀点击就送

而后只要在配置文件中修改文件上传接口即可

猜你喜欢

转载自blog.csdn.net/qi923701/article/details/81061284