CKEditor+CKFinder+jsp的整理

转载自：http://www.open-open.com/lib/view/open1355323983445.html

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下，并根据自己的项目稍作调整即可，如下：

<config>

<enabled>true</enabled>

<baseDir></baseDir>

<baseURL>http://127.0.0.1:8088/sitenav/uploadFiles/< /baseURL> <!---注意：我在这里就修改了这一处，必须改成自己项目的，不然上传图片找不到具体的网络路径-->

<licenseKey></licenseKey>

<licenseName></licenseName>

<imgWidth>1600</imgWidth>

<imgHeight>1200</imgHeight>

<imgQuality>80</imgQuality>

<uriEncoding>UTF-8</uriEncoding>

<forceASCII>false</forceASCII>

<disallowUnsafeCharacters>false</disallowUnsafeCharacters>

<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>

<checkDoubleExtension>true</checkDoubleExtension>

<checkSizeAfterScaling>true</checkSizeAfterScaling>

<secureImageUploads>true</secureImageUploads>

<htmlExtensions>html,htm,xml,js</htmlExtensions>

<hideFolders>

<folder>.svn</folder>

<folder>CVS</folder>

</hideFolders>

<hideFiles>

<file>.*</file>

</hideFiles>

<defaultResourceTypes></defaultResourceTypes>

<types>

<type name="Files">

<url>%BASE_URL%files/</url>

<directory>%BASE_DIR%files</directory>

<maxSize>0</maxSize>

<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,

mpeg,mpg,ods,odt,pdf,png,

ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip

</allowedExtensions>

<deniedExtensions></deniedExtensions>

</type>

<type name="Images">

<url>%BASE_URL%images/</url>

<directory>%BASE_DIR%images</directory>

<maxSize>0</maxSize>

<allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>

<deniedExtensions></deniedExtensions>

</type>

<type name="Flash">

<url>%BASE_URL%flash/</url>

<directory>%BASE_DIR%flash</directory>

<maxSize>0</maxSize>

<allowedExtensions>swf,flv</allowedExtensions>

<deniedExtensions></deniedExtensions>

</type>

</types>

<accessControls>

<accessControl>

<role>*</role>

<resourceType>*</resourceType>

<folder>/</folder>

<folderView>true</folderView>

<folderCreate>true</folderCreate>

<folderRename>true</folderRename>

<folderDelete>true</folderDelete>

<fileView>true</fileView>

<fileUpload>true</fileUpload>

<fileRename>true</fileRename>

<fileDelete>true</fileDelete>

</accessControl>

</accessControls>

<thumbs>

<enabled>true</enabled>

<url>%BASE_URL%_thumbs/</url>

<directory>%BASE_DIR%_thumbs</directory>

<directAccess>false</directAccess>

<maxHeight>100</maxHeight>

<maxWidth>100</maxWidth>

<quality>80</quality>

</thumbs>

<plugins>

<plugin>

<name>imageresize</name>

<class>com.ckfinder.connector.plugins.ImageResize</class>

<params>

<param name="smallThumb" value="90x90"></param>

<param name="mediumThumb" value="120x120"></param>

<param name="largeThumb" value="180x180"></param>

</params>

</plugin>

<plugin>

<name>fileeditor</name>

<class>com.ckfinder.connector.plugins.FileEditor</class>

<params></params>

</plugin>

</plugins>

<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>

</config>

4、然后在web.xml下添加上传用的配置如下：

<!-- ckfinder文件上传配置 start -->

<servlet>

<servlet-name>ConnectorServlet</servlet-name>

<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>

<init-param>

<param-name>XMLConfig</param-name>

<param-value>/WEB-INF/config.xml</param-value>

</init-param>

<init-param>

<param-name>debug</param-name>

<param-value>false</param-value>

</init-param>

<load-on-startup>2</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>ConnectorServlet</servlet-name>

<url-pattern>

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

</url-pattern>

</servlet-mapping>

<filter>

<filter-name>FileUploadFilter</filter-name>

<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>

<init-param>

<param-name>sessionCookieName</param-name>

<param-value>JSESSIONID</param-value>

</init-param>

<init-param>

<param-name>sessionParameterName</param-name>

<param-value>jsessionid</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>FileUploadFilter</filter-name>

<url-pattern>

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

</url-pattern>

</filter-mapping>

<!-- ckfinder文件上传配置 end -->

5、然后修改ckeditor下面的config.js，如下：

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']

];



};



6、然后就是CKEditor+CKFinder在jsp页面中应用，如下

a、将如下两句加入jsp页面中

<%@ taglib uri = "http://ckfinder.com" prefix="ckf" %>

<%@ taglib uri="http://ckeditor.com" prefix="ck" %>

b、引入以下js文件

<script type="text/javascript" src="<%=path %>/ckeditor/ckeditor.js"></script>

<script type="text/javascript" src="<%=path %>/ckfinder/ckfinder.js"></script>

c、需要添加编辑组件如下编写

<s:textarea id="txt" name="company.txt" rows="5" cols="120"></s:textarea>

<ckf:setupCKEditor basePath="/sitenav/ckfinder/" editor="txt"/> <!---注意：这里的sitenav为我的项目名称，请换成自己的项目名--->

<ck:replace replace="txt" basePath="${path}/ckeditor"></ck:replace>

<!---注意：这里的${path}需要自己定义一个，如：pageContext.setAttribute("path",request.getContextPath());--->

来自：http://blog.csdn.net/lpz283929516/article/details/8286383