jsp中如何整合CKEditor+CKFinder实现文件上传

简介: 最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人,不会在意这个。

 最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人,不会在意这个。笔者使用的版本分别是:CKEditor3.5.3+CKFinder2.0.2,今天笔者整理了一下配置CKEditor和CKFinder的过程,以及需要注意的一些问题,希望对大家有所帮助。

第一:下载CKEditor和CKFinder相关的安装文件

1、在CKEditor官网http://ckeditor.com/download上下载CKEditor for Java 3.5.3 war包,里面包含了相关的jar、脚本和示例。

2、在CKFinder官网http://ckfinder.com/download下载ckfinder_java_2.0.2.zip压缩包(注意选择Java平台下的压缩包)。

3、解压CKEditor for Java 3.5.3 war,把解压得到的目录 ckeditor 完全复制到网站根目录下,也就是和WEB-INF同级。可以给这个目录加上版本号,即ckeditor3.5.3。把 ckeditor3.5.3/samples 完全删掉,把 ckeditor3.5.3/lang 里面除了en.js和zh-cn.js之外的文件删掉,把 ckeditor3.5.3下的README.md, CHANGES.md删掉。把 ckeditor-java-core-3.5.3.jar 放到项目/WEB-INF/lib下

4、解压CKFinder_java_2.3.1.zip,得到ckfinder目录。将 ckfinder/CKFinderJava/ckfinder 目录完全复制到网站根目录下,也就是和WEB-INF同级。可以给这个目录加上版本号,即ckfinder2.0.2。参考CKFinderJava里的配置,在WEB-INF路径下添加CKFinder配置文件config.xml(可以将CKFinderJava文件夹里的config.xml文件直接拷到工程下,稍加修改即可)。

第二:配置CKEditor

   可以通过编辑ckeditor文件夹下的config.js来更改CKEditor的默认配置,也可以在页面创建CKEditorConfig的实例来添加或覆盖config.js里面的配置。

config.js

页面配置ckeditor.jsp:

效果图:

第三:整合CKEditor和CKFinder

   刚才已经配置好CKEditor,但是有个问题是支持jsp的版本的CKEditor一般默认没有图片上传功能,现在就需要正好CKFinder实现图片上传功能。

1、在CKEditor的配置文件config.js中添加引用CKFinder的配置。

2、修改CKFinder的config.xml文件

 

3、在web.xml中添加支持CKFinder的Servlet

4、参考示例创建页面ckfinder.jsp

 

效果如图:

 

至此,CKEditor3.5.3+CKFinder2.0.2整合成功,工程结构如图:

 

源代码下载地址:源码下载

目录
相关文章
|
7月前
|
Java
JSP实现文件上传——uploadFile.jsp
JSP实现文件上传——uploadFile.jsp
|
7月前
|
Java
jsp实现文件上传——douploadFile.jsp
jsp实现文件上传——douploadFile.jsp
|
6月前
|
XML Java 数据格式
JSP 教程 之 JSP 文件上传 4
在JSP教程中,学习文件上传涉及编写Servlet如`UploadServlet`(`com.baidu.test.UploadServlet`),配置`web.xml`以映射URL `/TomcatTest/UploadServlet`。完成设置后,通过访问`http://localhost:8080/TomcatTest/upload.jsp`使用HTML表单可进行文件上传。
32 2
|
6月前
|
Java Apache
JSP 教程 之 JSP 文件上传 3
该教程介绍了如何使用JSP进行文件上传。关键步骤包括:确保引入Apache Commons FileUpload和IO库,创建`UploadServlet`处理文件上传,设置上传限制,解析请求中的文件数据,并将文件保存到服务器指定目录。成功上传后,用户将被重定向到`message.jsp`显示上传成功的消息。
69 2
|
6月前
|
Java
JSP 教程 之 JSP 文件上传 1
JSP 文件上传教程介绍了如何利用 HTML form 和 Servlet 进行文件上传。关键点包括:POST 方法、multipart/form-data 的 enctype 设置以及指向 UploadServlet 的 action 属性。示例中,`upload.jsp` 提供了一个包含 file 类型 input 标签的上传表单。所需库为 commons-fileupload-1.3.2 和 commons-io-2.5.jar。
76 1
|
6月前
|
Java Apache
JSP 教程 之 JSP 文件上传 2
该教程介绍了如何使用JSP进行文件上传。关键步骤包括:确保引入Apache Commons FileUpload和Commons IO库,创建`UploadServlet`处理文件上传,设置上传配置如内存阈值和最大文件大小,并将上传的文件保存到指定目录。当表单提交后,Servlet解析请求,提取文件数据并保存到服务器。如果上传成功,用户将被重定向到`message.jsp`。
36 0
|
Web App开发 安全 JavaScript
浙大恩特客户资源管理系统 fileupload.jsp 任意文件上传漏洞
杭州恩软信息技术有限公司(简称浙大恩特)提供外贸管理软件、外贸客户管理软件等外贸软件,是一家专注于外贸客户资源管理及订单管理产品及服务的综合性公司,该系统旨在帮助企业高效管理客户关系,提升销售业绩,促进市场营销和客户服务的优化。系统支持客户数据分析和报表展示,帮助企业深度挖掘客户数据,提供决策参考。
342 0
|
Java 数据安全/隐私保护
JSP实现医院住院管理系统
JSP实现医院住院管理系统
331 0
JSP实现医院住院管理系统
|
前端开发 Java 关系型数据库
基于JSP实现医院病历管理系统
基于JSP实现医院病历管理系统
188 0
基于JSP实现医院病历管理系统
jsp实现文件上传——douploadFile.jsp
jsp实现文件上传——douploadFile.jsp

相关课程

更多