ckeditor文件浏览功能只需要自己做个jsp或servlet接收请求参数并把图片以列表的形式显示出来即可,
当用户选定图片的时候提交一个回调函数即可,回调函数和之前的上传一样,参数说明见上一篇。
CKEDITOR.replace( 'editor_kama',
{
customConfig : 'custom/myCkConfig.js',
skin : 'kama',
//filebrowserBrowseUrl : '/browser/browse.php',
filebrowserImageBrowseUrl : 'servlet/BrowerUpload',
//filebrowserUploadUrl : '/uploader/upload.php',
filebrowserImageUploadUrl : 'servlet/FileUpload'
});
这里可以看到 我们将filebrowserImageBrowseUrl 指向了一个我们自己编写的servlet
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class BrowerUpload extends HttpServlet {
public BrowerUpload() {
super();
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String callback = request.getParameter("CKEditorFuncNum");
System.out.println(callback);
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<script type='text/javascript'>");
out.println("function tt(obj){");
out.println("window.opener.CKEDITOR.tools.callFunction("+callback+",obj)");
out.println("window.close();");
out.println("}");
out.println("</script>");
String uploadDir = getServletContext().getRealPath("/upload");
File file = new File(uploadDir);
if(!file.exists()){
file.mkdir();
}
File[] files = file.listFiles();
for(File f:files){
if(f.isDirectory()){
out.print(f.getName());
File[] filesc = f.listFiles();
for(File fc: filesc){
out.print("<div onclick =tt('"+"upload/"+f.getName()+"/"+fc.getName()+"','')>");
out.print("upload/"+f.getName()+"/"+fc.getName());
out.print("</div>");
}
}
}
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
public void init() throws ServletException {
}
}
这个servlet就是用来遍历目录中的文件并构建回调函数
以下就是模拟构建后的结果
<script type='text/javascript'>
function tt(obj){
window.opener.CKEDITOR.tools.callFunction(1,obj)
window.close();
}
</script>
20100528<div onclick =tt('upload/20100528/20100528161405687.gif','')>upload/20100528/20100528161405687.gif</div>
这里当点击链接的时候就处罚js函数,完成在ckeditor编辑框中插入图片的操作。
这里只是模拟,实际上在使用的时候可以考虑用js相册组件去修饰一下。
分享到:
相关推荐
下面我们将详细讨论CKEditor文件上传的Java实现以及相关的知识点。 1. **CKEditor的文件上传接口** CKEditor提供了`filebrowserUploadUrl`配置选项,用于指定文件上传的服务器端处理URL。这个URL应指向一个能够...
这部分代码可能涉及到CKEditor的配置对象,如`config.filebrowserBrowseUrl`、`config.filebrowserImageBrowseUrl`等,这些配置指定了文件浏览和上传的URL,以及可能的上传参数设置。 在前端,CKEditor提供了一套...
在CKEditor 3.6.0版本中,它提供了文件上传功能,使得用户可以直接在编辑器内上传图片或其他文件,极大地提高了内容创作的便利性。本教程将详细介绍如何通过Servlet来实现CKEditor的文件上传功能。 首先,我们需要...
Java版本的CKeditor图片上传浏览服务端组件则是针对Java开发者设计的,用于处理CKeditor中的图片上传请求,并且与之配合实现图片预览。 该组件的核心功能包括: 1. **图片上传**:当用户在CKeditor中选择插入图片...
`ckeditor`是一款知名的开源JavaScript富文本编辑器,而`ckfinder`则是一个与之配合的文件管理器,主要用于上传、管理和选择编辑器中的图片和文件。本文将详细介绍如何在JAVA工程中整合这两款工具,实现图片和文件的...
首先,在CKEditor的配置中,我们需要定义一个`filebrowserBrowseUrl`,指向我们的文件浏览服务器端接口。例如: ```javascript CKEDITOR.replace('editor', { filebrowserBrowseUrl: '/api/upload', }); ``` 这里...
在Java环境中,CKFinder同样有对应的Java版本,可以与Java Web应用集成,处理文件上传、权限控制等需求。通过配置,开发者可以设置CKFinder与服务器的通信路径,确保文件安全存储。 【集成CKEditor+ckeditor-java+...
通过以上步骤,你就可以在Java Web项目中成功整合Ckeditor和ckFinder,提供一个支持文件上传的富文本编辑器。在实际开发中,你可能还需要根据项目需求进行一些定制化工作,例如调整编辑器样式、增加额外的插件等。...
2. **配置CKFinder**:CKFinder需要与服务器端的Java应用进行交互,处理文件上传、下载等操作。这通常需要配置CKFinder的服务器端设置,如URL路径、文件存储位置等。对于Java环境,CKFinder提供了JavaBridge,一个...
### CKEditor与CKFinder整合For Java(支持文件上传、解决乱码问题) #### 知识点一:CKEditor与CKFinder简介 - **CKEditor**:CKEditor是一款强大的开源富文本编辑器,广泛应用于Web应用程序中,允许用户直接在...
为了实现这个功能,开发者需要在后端设置一个接收文件上传的接口,处理文件上传请求,保存文件到服务器,并返回文件路径或URL给Ckeditor,以便编辑器能正确显示这些媒体内容。 **4. 去除服务器文件浏览功能** 出于...
CKFinder是一款与CKEditor配套的文件管理器,用于浏览、选择和上传文件到服务器。它支持多种文件类型,包括图片、文档、视频等,且具有权限控制功能,可以根据用户角色设定不同的访问和操作权限。 **CKEditor与...
在CKEditor与Struts2结合的图片上传场景中,Struts2扮演了接收、存储和返回图片URL的角色。 以下是实现CKEditor图片上传的关键步骤: 1. **配置CKEditor**:首先,需要在项目中引入CKEditor库,并对其进行配置,...
在本文中,我们将深入探讨如何将Ckeditor与ckfinder整合在Java环境下,实现文件上传功能。Ckeditor是一款强大的富文本编辑器,而ckfinder则是一个文件管理器,它们结合使用可以方便地在编辑器中插入、管理和上传各种...
CKEditor是一款强大的富文本编辑器,而CKFinder则是一个文件管理器,两者结合可以提供完整的文本编辑与文件上传功能。 **CKEditor 3.6** CKEditor 3.6是CKEditor的一个旧版本,但它在当时提供了许多先进的特性。这...
例如,限制上传文件的类型和大小,防止恶意文件上传;对上传的图片进行缩放和优化,减少服务器存储空间和加载时间;以及使用CDN服务,提高图片加载速度。 总结,CKEDITOR编辑器的本地图片上传功能结合服务器端处理...
总的来说,"CKEditor 上传图片"是通过集成CKEditor和Struts2的文件上传功能,实现了在网页编辑器中便捷上传和显示图片的功能。理解并熟练掌握这一技术,对于开发交互性强、用户体验良好的Web应用具有重要意义。
在这个场景下,Servlet会接收来自CKEditor的图片上传请求,验证文件类型和大小,然后通过FTP协议将文件上传到服务器的特定目录。FTP(File Transfer Protocol)是一种标准网络协议,用于在计算机之间传输文件。配置...
在这个场景中,"JSP使用ckeditor和ckfinder实现富文本及文件上传"是一个常见的需求,尤其是在构建内容管理系统或者论坛等需要用户编辑和上传内容的Web应用中。 ckeditor是一款流行的开源JavaScript富文本编辑器,它...
本文将详细介绍Java环境下集成ckeditor和ckfinder的实例,这是一套功能完善的解决方案,提供了丰富的文本编辑和文件上传预览功能。 ckeditor是一款知名的JavaScript富文本编辑器,它允许用户在网页上创建、编辑和...