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

最近笔者做了一个新闻发布平台,放弃了之前的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整合成功,工程结构如图:

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

时间: 2024-10-11 09:11:17

jsp中如何整合CKEditor+CKFinder实现文件上传的相关文章

在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor,相信没几个Web程序员不知道的吧.不过,官方已经停止了该产品的更新,其最新版是2.6.6,于2010年2月15日发布. 取代FCKeditor的产品叫CKEditor(Content And Knowledge Editor),与其说是对FCKeditor的升级,不如说是全新的一个产品.相比FCK

【Jsp】使用jspsmartupload完成简单的文件上传系统

请不要妄想,一个html的file控件,再加上javascript与jquery语句就可以完成文件上传, 文件上传系统从来是需要配合服务器来完成的 用户把自己的文件上传到服务器上 文件上传系统是很复杂的一件事. html的file控件向动态网页语言以post方式通过enctype="multipart/form-data"解码成二进制文件就不管了 动态网页需要对其通过asp,jsp,php,asp.net编程,才能正常把文件保存到服务器中 网络上对文件处理的方法是五花八门,让人无从下手

在EasyUI项目中使用FileBox控件实现文件上传处理

我在较早之前的随笔<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是Jquery+Flash实现文件的上传处理,HTML5收费版本的没有试过.随着Flash逐渐退出整个环境,很多浏览器都可能不再支持Flash的了,因此在更新原有EasyUI整个框架的时候,我们对框架全面进行了完善,包括替换了这个Uploadify的文件上传模块,使用EasyUI内置的FileBox控件,结合Jq

CKEditor 整合CKFinder实现文件上传及富文本操作

事先说明:此整合的是java版本的  1,下载需要资源: a) ckeditor_4.4.5 (解压)(原谅我喜欢功能强大的,如果你不喜欢,可以用basic版的) http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.5/ckeditor_4.4.5_full.zip b) ckeditor-java-3.6.6.2 (解压)(这个可以作为一个参考来看看,不想下载也可以,也有.Net版的) http://download.ck

SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传

搞清楚路径位置 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可以只剩下en.js,zh.js,zh-cn.js 图片上传时图像信息中的预览会显示一堆英文信息,会干扰预览.找到ckeditor/plugins/image/dialogs/image.js,搜索"d.config.image_previewText"就能找到这段鸟语了,(d.config.image_previewText||")引号中

SpringMVC中采用简洁的配置实现文件上传

文件上传我们一般会有两种策略,一种是通过IO流上传,还有一种是通过表单上传,其实这两种在客户端实现起来都是很简单的,在服务端处理会略有差别,个人感觉IO上传代码简单,但是也有很多硬伤,还是表单上传更合适.特别是如果我们的后台程序如果既面向移动端,又面向Web前端,那么通过表单上传无疑是最佳解决方案.OK,废话不多说,我们来看看如何通过一个最简单的配置来实现文件的上传. 我们主要通过如下几个步骤来实现这个功能: 1.引入依赖 2.创建文件上传页面 3.配置SpringMVC 4.Web配置 5.编

JSP学习笔记(四):文件上传

JSP 可以与 HTML form 标签一起使用,来允许用户上传文件到服务器.上传的文件可以是文本文件或图像文件或任何文档.我们使用 Servlet 来处理文件上传,使用到的文件有: upload.jsp : 文件上传表单. message.jsp : 上传成功后跳转页面. UploadServlet.java : 上传处理 Servlet. 需要引入的 jar 文件:commons-fileupload-1.3.2.commons-io-2.5.jar. 结构如下所示: 1.创建一个文件上传表

MVC中使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法——File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的“读

在Servlet中利用Apache开源类库实现文件上传

本文结合具体的范例,介绍如何通过Apache开源类库提供的软件包,在Servlet中进行文件上传.本文的参考书籍是<Tomcat与Java Web开发技术详解>第三版,作者:孙卫琴. 本文所用的软件版本为:Window10,JDK10,Tomcat9.本文所涉及的源代码的下载网址为:http://www.javathinker.net/javaweb/upload-app.rar Apache开源软件组织提供了与文件上传有关的两个软件包:? fileupload软件包(commons-file