本文介绍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的用户界面友好,易于使用,且高度可定制。 2. **Java集成** "ckeditor-java-core-...
5. **处理上传文件**:"WEB-INF"目录下的配置文件和类可能包含了处理CKEditor上传文件的逻辑,如图片或附件上传。开发者需要在后端处理这些请求,保存文件并返回成功或失败的反馈。 6. **样例测试**:"_samples...
- **图片上传**:CKEditor支持本地文件上传,可以通过配置设置上传策略,如限制大小、类型等。 - **插件系统**:CKEditor有丰富的插件库,可以扩展其功能,例如添加数学公式编辑、地图插入等。 - **多语言支持**:...
CKEditor是一款广泛应用于Web开发中的开源富文本编辑器,它为用户提供了一种在网页上进行内容编辑的便捷方式。在.NET环境下,CKEditor被封装成了一个控件,使得ASP.NET开发者能够轻松集成到他们的应用程序中,提供...
4. **自定义上传位置**:在.NET环境中,开发者需要在服务器端编写代码来处理视频文件的保存。这通常包括设置一个上传目录,确保该目录可写,以及使用如System.IO命名空间下的类(如FileInfo、DirectoryInfo等)来...
1. 下载并解压CKEditor文件,将其放置在项目适当位置。 2. 在后台编辑页面引入CKEditor,并配置图片浏览和上传的URL。 3. 创建处理图片上传的PHP脚本。 4. 配置CKEditor启用CKFinder插件,实现批量上传功能。 遵循...
CKEditor是一款广泛使用的开源富文本编辑器,它允许用户在网页上进行文本编辑,具有丰富的功能和高度可定制性。"ckeditor皮肤-office2013"是一个专为CKEditor设计的皮肤,旨在使其外观和感觉与流行的Microsoft ...
在C# MVC应用中,集成CKEditor以实现图片上传功能是一项常见的需求,它允许用户在网页编辑器中方便地插入和管理图片。...记得在实际项目中,还需要考虑安全性问题,如验证文件类型、大小以及防止恶意文件上传。
- 图片上传应考虑安全问题,例如防止恶意文件上传、限制文件类型和大小,以及对上传文件进行重命名以避免覆盖已有文件。 - 为了优化性能,可以考虑使用异步上传,或者使用云存储服务如AWS S3或Azure Blob Storage...
- 图片上传插件:可以使用CKEditor的内置`FileUpload`插件,或者自定义上传逻辑。 - 文件读取:使用HTML5的`FileReader` API预览选定的图片。 - 数据转换:将图片数据转换为Base64编码,以便通过Ajax发送到服务器...
4. 权限控制:确保只有授权用户才能上传图片,防止恶意文件上传。 5. 存储策略:考虑使用云存储服务,如阿里云OSS或AWS S3,以提高可扩展性和安全性。 通过以上步骤,你可以在CKEditor中成功整合图片上传功能,提升...
- **图片上传**:CKFinder是一款与CKEditor配套的文件管理器,可实现图片和文件的上传、管理。 - **与后端接口对接**:CKEditor编辑的内容通常需要保存到服务器,需要编写对应的接口处理富文本数据。 总的来说,...
此外,如果需要使用到上传功能,还需要配置文件上传的处理逻辑和服务器的临时目录。 总的来说,CKEditor 4.8.0 asp.net源码是一个强大且灵活的富文本编辑解决方案,能够轻松地嵌入到ASP.NET应用中,提供丰富的文本...
它提供了多种内置工具,包括文本格式化、图片上传、链接创建、表格插入、列表操作等。此外,它支持实时预览,使得用户在编辑时就能看到最终的排版效果。CKEditor 5 还有强大的富媒体集成能力,可以轻松插入视频、...
3. 将解压后的文件上传至帝国CMS系统中的CKEditor插件目录,一般为`/static/ckeditor/plugins/`目录下。 4. 登录帝国后台,进入CKEditor的配置界面,添加lineheight插件到已启用插件列表中,这通常需要编辑`config....
CKEditor是一款流行的富文本编辑器,提供了多种编辑选项,如字体、样式、图像上传、链接管理等,使得在网页上创建和编辑复杂内容变得轻松易行。 要开始使用`laravel-ckeditor`,首先需要将其添加到Laravel项目的...
服务器端脚本需要处理文件上传请求,验证文件类型和大小,然后保存到指定目录并返回URL给CKEditor。 5. **前端技术**:前端部分通常使用JavaScript(可能包含jQuery库)来处理用户交互,如监听文件选择事件、发送...
在本项目中,我们关注的是CKEditor 4.16版本与ASP.NET C#的集成,特别是如何处理从Word中复制粘贴的图片以及实现多文件上传的功能。 首先,"ckeditor"是CKEditor的核心部分,它是一个JavaScript库,提供了丰富的...
1. **自定义配置**:可以通过 CKEditor 的配置参数,调整编辑器的行为,如工具栏按钮、文件上传设置等。 2. **图片和文件管理**:Django CKEditor 可以集成文件和图片管理器,便于用户在编辑器内上传和管理媒体资源...