红联Linux门户
Linux帮助

CKEditor+CKFinder+jsp的整理

发布时间:2014-07-09 11:06:30来源:红联作者:velcbo
CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。

本篇文章主要介绍ckeditor_3.6.4+ckfinder_java_2.3

CKEditor下载地址:http://ckeditor.com/download 在线演示地址:http://ckeditor.com/demo

ckeditor-java-core-3.5.3.zip 下载地址:http://ckeditor.com/download

CKFinder下载地址: http://cksource.com/ckfinder/trial

1、解压ckeditor_3.6.4.zip,然后打开ckeditor文件夹,只需保留:images、lang、plugins、skins、themes、ckeditor_basic.js、ckeditor.js、config.js、contents.css即可

其他的文件可以删除。然后将整个ckeditor放在web工程下,与WEB-INF处于同一级目录。

2、将ckeditor-java-core-3.5.3.zip解压,然后将ckeditor-java-core-3.5.3.jar包拷贝至web项目的lib下。

3、将ckfinder_java_2.3.zip解压,然后将CKFinderJava.war解压后,将WEB-INF里面的lib下面所有的jar包拷贝至web项目的lib下,将ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp下的ckfinder文件夹拷贝至web工程下,与ckeditor保持同级,将其下的WEB-INF下面的config.xml文件拷贝至web项目的WEB-INF下,并根据自己的项目稍作调整即可,如下:[code]
true

http://127.0.0.1:8088/sitenav/uploadFiles/


1600
1200
80
UTF-8
...... ......
< /config>[/code]4、然后在web.xml下添加上传用的配置如下:[code]

ConnectorServlet
com.ckfinder.connector.ConnectorServlet

XMLConfig
/WEB-INF/config.xml


debug
false

2


ConnectorServlet

/ckfinder/core/connector/java/connector.java



FileUploadFilter
com.ckfinder.connector.FileUploadFilter

sessionCookieName
JSESSIONID


sessionParameterName
jsessionid



FileUploadFilter

/ckfinder/core/connector/java/connector.java


[/code]5、然后修改ckeditor下面的config.js,如下:[code]CKEDITOR.editorConfig = function( config )
{
config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = '../ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = '../ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;
config.language = "zh-cn";
config.image_previewText=' '; //预览区域显示内容
config.skin = 'kama';//默认皮肤
//config.skin = 'v2';
//config.skin = 'office2003';

config.toolbar = 'Full';

config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
];

config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

};[/code]6、然后就是CKEditor+CKFinder在jsp页面中应用,如下

a、在jsp文件中加入:[code]<%@ taglib uri = "http://ckfinder.com" prefix="ckf" %>
<%@ taglib uri="http://ckeditor.com" prefix="ck" %>[/code]b、需要添加编辑组件如下编写[code]





[/code]作者:lpz283929516
文章评论

共有 0 条评论