这两天做类似公司门户网站的项目,项目中要在后台提供添加产品内容介绍、新闻内容发布的功能模块,需要达到在后台直接编辑形成页面展示内容展示在前台页面,内容必不可少的一个素材就包含图片,要能在编辑器中直接插入图片,调整位置,大小等。经过筛选之后选择了CKEditor这个网页编辑器以及常用的一个组合件ckfinder。
CKEditor是目前最优秀的可见即可得的网页编辑器之一,目前最新版本为4.4.4,在3.0之前名称为FCKEditor,3.0之后更名为CKEditor。这款编辑器采用JavaScript编写,具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点,项目使用的是Java+JSP编写,加入CKEditor十分便捷。
1.下载CKEditor相关文件
Ckeditor 官网:
http://ckeditor.com/demo,进入官网之后点击顶部导航Download,可以选择下载哪种CKEditor包,CKEditor包目前有三种:Basic Package,基本包,包含17个插件,能够完成最基本的网页编辑功能、Standard Package,标准包,包含48个插件,能完成更多格式调整,包括字体选择,排版调整等,另外有图片上传等基本包没有带的功能。Full Package,完全包,拥有更丰富的样式设计以及其他功能。根据功能要求选择需要的包进行下载,这里我选择的是Standard Package,点击下载。得到ckeditor_4.4.4_standard.zip
CKEditor forJava 在 http://ckeditor.com/download下载页面底部,可以下载到CKEditor 3.6.6.2for Java ,页面显示版本为3.6.6.2,但是下载之后解压得到的是ckeditor-java-core-3.5.3.jar,不知道什么原因,但是不影响使用。
CKFinder,在 http://cksource.com/ckfinder/trial页面,可以下载到各种版本的CKFinder,选择Java版下载,得到ckfinder_java_2.4.2.zip,解压得到ckfinder文件。
2.
将ckeditor和ckfinder加入到项目中
解压CKEditor_4.4.4.zip和CKFinder_3.6.6.2.zip得到 ckeditor、ckfinder两个文件,把解压得到的两个文件复制到项目WebRoot目录下。
解压ckeditor-java-core-3.5.3.zip ,得到jar包文件,将ckeditor-java-core-3.5.3.jar放到WEB-INF/lib中。
对项目文件大小精简,以下是可以删除的文件:
ckeditor/sample
ckeditor/lang 中除en.js、zh_cn.js
ckfinder/sample
ckfinder/changelog.txt、install.txt、license.txt、translation.txt
复制ckfinder/CKFinderJava/WEB-INF/lib下所有的jar包到WEB-INF/lib下
把ckfinder/CKFinderJava/WEB-INF/config.xml复制到WEB-INF下,改名为ckfinder.xml
得到如下结构图:
3.
在页面使用CKEditor
Step1.在需要使用CKEditor编辑器的页面,引入CKEditor的js文件
< script type="text/javascript" src="ckeditor/ckeditor.js"></script>
Step2.在需要提交的form表单里面将<textarea>和CKEditor实例绑定
< textarea name="content" id="content"rows="10" cols="80">
创建CKEditor实例:
<
script
>
var
editor =
null
;
editor= CKEDITOR.replace(
'content',{Hieght:700,Width:600});
CKFinder.setupCKEditor(editor,
'../ckfinder/');
</
script
>
实际文本编辑器内的内容content将会替代textarea的内容被提交到后台。
Step3.在后台java代码中获取CKEditor编辑器的值
<
script
type="text/javascript">
function
save(){
editor.updateElement();
}
</
script
>
因为CKEditor编辑器取代了textarea元素,所以在编辑器写的内容,其实都不在textarea中,为了获取textarea获得之,需要使用editor.updateElement()来更新textarea元素,后台就能使用request.getParameter()或者其他代码来得到编辑器的内容。
4.将CKFinder
整合进CKEditor
没有CKFinder,CKEditor作为一个编辑器,也是可以正常使用的,但是无法在编辑器里浏览服务器上的用户上传文件,所以需要整合CKFinder
Step1.在页面引入CKFinder的JS文件
< script type="text/javascript" src="ckfinder/ckfinder.js"></script>
Step2.创建CKFinder实例
KFinder.setupCKEditor(editor,
'../ckfinder/');
Step3.配置CKFinder
在/WEB-INF/ckfinder.xml中,编辑如下内容
enabled:true,表示开启ckfinder功能,默认false
baseDir:上传文件存放的路径,这里必须写从屋里地址的全路径
baseURL:上传文件存放的URL,这里可以写一个相对路径或者完整的RUL,比如 http://www/example.com/upload/或者/upload/
types:指定上传文件的类型,子元素是<type name = “”></type>,其中name要和CKEditor里配置的路径的type一直。
5.修改CKFinder配置
CKFinder整合进入CKEditor之后浏览服务器上的用户文件是没有问题了,但是在将浏览的文件插入到文本中,会出现读取地址从项目根目录开始插入的问题,也就是虽然能够插入图片等文件,但是在页面上依然不能正常显示,这个时候需要修改CKFinder的一个配置文件,ckfinder.html
打开WebRoot/ckfinder/ckfinder.html
在function(){}函数中定义本地地址,项目名,相对路径等变量,并且获取值,如下:
var
localhostPath = curPath.substring(0,pos);
//
获取主机地址
var
projectName =pathName.substring(0,pathName.substr(1).indexOf(
'/')+1);
var
positionPath = localhostPath + projectName;
在插入文件地址处修改地址拼接:
config.selectActionFunction=
function
(fileUrl, data )
{
parentWindow['CKEDITOR'].tools.callFunction(funcNum, positionPath + fileUrl, data );
};
至此,能够在页面编辑器中完成图片的插入,并且完整的显示在编辑器中.如下图: