本文介绍2种使用ckeditor上传文件保存至项目外(即硬盘)的方法。
环境:tomcat + spring
第一种:CKEditor文件上传-多种方式-与ckfinder结合上传
第二种:使用自己写的上传方法。
下面我们来说说第二种方法的实现:
1.Action中的方法
/** * 使用ckeditor编辑器 上传图片[保存至本地硬盘-项目外] * * @param m * @param request * @param response * @return */ @RequestMapping(value = "/doCkeditorUpload", method = RequestMethod.POST) public String doCkeditorUpload(Model m, MultipartHttpServletRequest request, HttpServletResponse response) throws IOException { String url = ""; try { Iterator<String> iterator = request.getFileNames(); while (iterator.hasNext()) { String next = iterator.next(); List<MultipartFile> files = request.getFiles(next); for (MultipartFile file : files) { String name = file.getOriginalFilename(); String type = FileUploadUtil.getType(name); String fileId = UUID.randomUUID().toString(); String newName = fileId + "." + type; //写入文件 StringBuffer filePath = new StringBuffer(); filePath.append(FileUploadUtil.filePath); filePath.append(FileUploadUtil.getRelativePath( "ckeditor", type)); FileUploadUtil.checkFile(filePath.toString()); FileOutputStream fos = null; fos = new FileOutputStream(filePath + newName); fos.write(file.getBytes()); fos.flush(); fos.close(); //保存至外部 url=request.getContextPath() + "/system/attachment/fileUpload/getCkeditorFile.htm?type="+type+"&fileId="+fileId; //保存至内部 //url = FileUploadUtil.getUrl("xheditor", type, newName); //url = request.getContextPath() + "/files" + url; response.setContentType("text/html; charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); String callback = request .getParameter("CKEditorFuncNum"); out.println("<script type=\"text/javascript\">"); out.println("var parentWindow = ( window.parent == window ) ? window.opener : window.parent;"); out.println("parentWindow.CKEDITOR.tools.callFunction(" + callback + ",'" + url + "',''" + ")"); out.println("</script>"); out.flush(); out.close(); } } } catch (Exception e) { url = ""; e.printStackTrace(); } return null; } /** * 获取文件流 * @param request * @param response * @return * @throws Exception */ @RequestMapping(value = "/getCkeditorFile") public String getCkeditorFile(HttpServletRequest request, HttpServletResponse response) throws Exception { String type = request.getParameter("type"); String fileId = request.getParameter("fileId"); response.reset(); response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileId+"."+type, "UTF-8")); response.setContentType("application/octet-stream"); if (isNotBlank(fileId) && isNotBlank(type)) { //写出文件 StringBuffer filePath = new StringBuffer(); filePath.append(FileUploadUtil.filePath); filePath.append(FileUploadUtil.getRelativePath( "ckeditor", type)); String fileName = fileId+"."+type; File file = new File(filePath+fileName); FileInputStream is = new FileInputStream(file); int i = -1; try { while ((i = is.read()) != -1) { response.getWriter().write(i); } } catch(Exception e){ e.printStackTrace(); }finally { is.close(); } response.getWriter().flush(); } return null; }
2.页面如何调用,把值传回至编辑域
在ckeditor config.js中配置上传路径CKEDITOR.editorConfig
/*自定义上传*/ config.filebrowserUploadUrl = getRootPath()+'/attachment/doCkeditorUpload.do?type=file'; config.filebrowserImageUploadUrl = getRootPath()+'/attachment/doCkeditorUpload.do?type=image'; config.filebrowserFlashUploadUrl = getRootPath()+'/attachment/doCkeditorUpload.do?type=flash';
如此则大功告成,保存在项目外硬盘内,方便项目维护。
如果您想通过ckeditor结合ckfinder上传,请参看《 CKEditor文件上传-多种方式-与ckfinder结合上传》
如有不足,欢迎指正!
相关推荐
ckeditor-java-core-3.5.3.jar ckeditor-java-core-3.5.3.jar ckeditor-java-core-3.5.3.jar ckeditor-java-core-3.5.3.jar ckeditor-java-core-3.5.3.jar
ckeditor-java-core-3.5.3-javadoc.chm
CKEditor 富文本编辑框 富文本编辑器 ckeditor struts2fckeditorplugin ckeditor-java-core-3.5.3
有名的富文本编辑器器:ckeditor,你懂的。
CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。
ckeditor4音频视频上传自定义插件
要加载插件,请配置ckeditor(例如,编辑文件ckeditor.js ),如下所示:导入插件import CustomElementPlugin from 'ckeditor5-custom-element/src/customelement';导入工具栏图标(可选) import Icon1 from 'path...
CKEditor FCKEditor 使用-集成 CKFinder(上传文件、浏览文件)
页面上的文本编辑 ckeditor-java-3.6.4.zip
ckeditor5-build-classic-10.0.1.zip
集成了以下模块: Essentials,UploadAdapter,Autoformat,Bold,Italic,BlockQuote,EasyImage,Heading,Image,ImageCaption,ImageStyle,ImageToolbar,ImageUpload,Link,List,Paragraph,Alignment,Font,Highlight,Table,...
1. 流行的富文本编辑器 2.CKEditor5 的25.0.0版本
资源来自pypi官网。 资源全名:django-ckeditor-5-0.0.8.tar.gz
ckeditor5-line-height-plugin CKEditor5的创建插件,用于更改所选块的行高。 开始使用 首先,从npm安装构建: npm install --save ckeditor5-line-height-plugin 或使用纱线: yarn add ckeditor5-line-height-...
ckeditor加ckediotr-java加ckfinder
ckeditor文件上传功能,附图片上传示例,java程序及返回结果。 strut配置 <param name="allowedTypes">image/bmp||image/png||image/gif||image/jpeg||image/jpg||image/pjpeg</param> ...
用自定义图片上传按钮代替原来的图片上传按钮,实现即时上传插入。覆盖原ckeditor。修改ckeditor.js中imgupload()的上传接口路径。根据接口返回自定义 success: function 中的代码解析出图片路径。
CKEditor-3-配置文档 config.height = 500; config.htmlEncodeOutput = true config.language = 'de';
ckeditor 自定义上传图片 可以自定义上传图片按钮,源码,
CKEditor5-plugins基于ckeditor5的,适用于自定义构建的插件包。要使用此插件包,则不建议直接使用官方的classic、document、inline、balloon等构建,建议自定义构建features 包含功能├── src│ ├── clear-...