基于spring-boot的web应用,ckeditor上传文件图片文件

时间:2022-05-23 01:05:57

说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考!

第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的配置图片文件上传功能,默认这个是没有开启的,就不用多说,ckeditor官网上也说的很清楚!http://docs.ckeditor.com

下面简单的说下配置(配置文件algoConfig.js):

 CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
]; config.removeButtons = 'Source,Save,NewPage,Scayt';
config.image_previewText=' '; //预览区域显示内容
config.filebrowserImageBrowseUrl = '/browse/mgmt/img';
config.filebrowserImageUploadUrl = '/upload/mgmt/img';
};

上图中,背景颜色加高亮的为关键配置。等号左边的是key,等号右边的,则对应于web应用中的一个url,这个是配合后台应用中一个controller的处理,也就是一个servlet的操作。具体如何处理,后面再说!

再多罗嗦一下,我的这个配置中,涉及到图片预览区的那堆看不懂的文字的去除处理。我将其清掉了!如上面的21行的配置。另外,我的ckeditor工具栏中,去掉了一部分的button。具体如何操作,可以参考ckeditor的samples下面的toolbarconfigurator里面有个index.html,在浏览器里打开,可以参照着说明即可定制自己的工具栏

在应用的js文件中作如下的配置,即可以enable定制的CKeditor。

 /**
* 下面是用CKeditor进行编辑文件
*/
CKEDITOR.replace( 'practice_content', // practice_content是html文件中的对应的textarea编辑区的ID名称,注意不要写成#practice_content
{
language: 'zh-cn',
uiColor: '#c3c8d1',
customConfig: '/js/ckeditor/algoConfig.js' //自定义自己的toobar风格
});

到现在为止,定制的CKeditor的图片上传配置部分算是结束了。

此时,可以看到页面上的ckeditor的状态为下图所示:

基于spring-boot的web应用,ckeditor上传文件图片文件

说明下: 图中1标记对应配置:config.filebrowserImageUploadUrl = '/upload/mgmt/img';

     图中2标记对应配置:config.filebrowserImageBrowseUrl = '/browse/mgmt/img';

          图中3标记对应配置:config.image_previewText=' ';

第二步,就是图片文件上传的后台处理了,这步就是添加url /upload/mgmt/img的后台响应。由于ckeditor的文件上传是采用的表单form以post的方式提交enctype为multipart/form-data的文件到后台服务器(此数据可以从html页面debug方式查看,如下图所示),那么对应的后台文件接受,则也采用Multipartfile的形式。

基于spring-boot的web应用,ckeditor上传文件图片文件

所以,后台的程序,应该也不是很难实现的事情。我就直接贴代码了,有兴趣的,自己可以看看!

 @RequestMapping(value="/upload/mgmt/img", method=RequestMethod.POST)
public void handleFileUpload(User user, @RequestParam("upload") MultipartFile file,
HttpServletRequest request, HttpServletResponse response){
String name = "";
if (!file.isEmpty()) {
try {
response.setContentType("text/html; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
9 response.setHeader("X-Frame-Options", "SAMEORIGIN");
PrintWriter out = response.getWriter(); String fileClientName = getFileName(file.getOriginalFilename());
String fileFix = StringUtils.substring(fileClientName,
fileClientName.lastIndexOf(".") + 1);
if (!StringUtils.equalsIgnoreCase(fileFix, "jpg")
&& !StringUtils.equalsIgnoreCase(fileFix, "jpeg")
&& !StringUtils.equalsIgnoreCase(fileFix, "bmp")
&& !StringUtils.equalsIgnoreCase(fileFix, "gif")
&& !StringUtils.equalsIgnoreCase(fileFix, "png")) {
logger.error("Incorrect format of the uploading file -- " + fileFix);
return;
} if (logger.isInfoEnabled()) {
logger.info("Begin uploading: " + file.getName());
} // 为了客户端已经设置好了图片名称在服务器继续能够明确识别,这里不改名称
// 获取目录
30 File floder = buildFolder(user, request, FileType.IMAGE);
if (null == floder) {
logger.info("folder is null");
return;
} File newfile = new File(floder, fileClientName);
byte[] bytes = file.getBytes();
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(newfile));
stream.write(bytes);
stream.close(); if (logger.isInfoEnabled()) {
logger.info("Uploading done,floder: " + newfile.getPath());
} // 组装返回url,以便于ckeditor定位图片
47 String fileUrl = request.getContextPath() + MueasConstants.APP_RUNNING_FILES_DIR;
48 fileUrl += IMAGE_DIR + File.separator + newfile.getName();
49 fileUrl = StringUtils.replace(fileUrl, "//", "/");

// 将上传的图片的url返回给ckeditor
String callback = request.getParameter("CKEditorFuncNum");
String script = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + callback + ", '" + fileUrl + "');</script>"; out.println(script);
out.flush();
out.close();
} catch (Exception e) {
logger.info("You failed to upload " + name + " => " + e.getMessage());
}
} else {
logger.info("You failed to upload " + name + " because the file was empty.");
}
}

其中,代码里面的红色部分比较值得注意,其他都不是太难的事情。

第一处红色部分是为了解决下面的错误:

Refused to display 'http://localhost:8080/upload/mgmt/img?CKEditor=practice_content&CKEditorFuncNum=1&langCode=zh-cn' in a frame because it set 'X-Frame-Options' to 'DENY'.

第二处(30行)和第三处(47-49行)是为了让上传上来的文件存放的位置和ckeditor上传文件获取的URL地址(GET方式)的一致性。

这里再上传一下创建存放文件的目录的代码:

 private File buildFolder(User user, HttpServletRequest request, FileType type) { 

         String realPath = request.getSession().getServletContext().getRealPath(MueasConstants.APP_RUNNING_FILES_DIR);
String folderdir = "";
//如果不存在,创建
switch(type){
case IMAGE:
folderdir += realPath + IMAGE_DIR;
break;
case FILE:
folderdir += realPath + FILE_DIR;
break;
case FLASH:
folderdir += realPath + FLASH_DIR;
break;
case VIDEO:
folderdir += realPath + VIDEO_DIR;
break;
} File floder = new File(folderdir);
if (!floder.exists()) {
if (!floder.mkdirs()) {
logger.error("Create folder failed! path=" + folderdir);
return null;
}
}
return floder;
}

这里,根据文件类型,创建不同的子目录。其中重点是request.getSession().getServletContext().getRealPath(MueasConstants.APP_RUNNING_FILES_DIR);这个,大家若不是很明白,可以查看一下文档。

另外,就是配合使用的request.getContextPath() + MueasConstants.APP_RUNNING_FILES_DIR;总之,就是为了让地址一致,存放文件的位置地址要让取文件的GET指令能够得到文件即可。

最后说下,为了控制上传文件的大小,在spring-boot的配置文件中添加下面的信息:

multipart.maxFileSize = 3Mb
multipart.maxRequestSize = 20Mb

运行起来后,可以做测试图片文件上传的功能了,效果如下图所示:

基于spring-boot的web应用,ckeditor上传文件图片文件

此时,点击“确定”按钮,图片文件就会显示在自己设计的textarea的区域了。是不是不那么难?

话说回来,调通了是觉得不难,但是,在没有调通的时候,就那个x-options-frame的问题,就让我很头疼。

其次,在后台处理的代码中,起初,我采用的是commons-fileupload插件中的代码处理的,但是总不成功,一下午,google了很多外文帖子,也不凑效,遂改成上面的代码处理。其commons-fileupload关键参考代码如下:

     DiskFileItemFactory factory = new DiskFileItemFactory();
// maximum size that will be stored in memory
factory.setSizeThreshold(maxMemSize); // Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
// maximum file size to be uploaded. upload.setSizeMax(maxFileSize); List<FileItem> fileItems = upload.parseRequest(request);

测试过程中,总是遇到列表filetems为空的问题,其实request中是有上传过来的文件信息的。折腾了很久,还是没有找到原因。算一个Open Point吧,若有高人或者过来人,可以给我指点一下。