CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。
本篇文章主要介绍ckeditor-java-3.6.4 + ckfinder_java_2.4
CKEditor下载地址:http://ckeditor.com/download :CKEditor 3.6.4 for Java 下载 Download .war (即ckeditor-java-3.6.4.war )
在线演示地址:http://ckeditor.com/demo
CKFinder下载地址:http://cksource.com/ckfinder/download 下载 ckfinder_java_2.4.zip
1、解压ckeditor-java-3.6.4.war,然后打开ckeditor文件夹,只需保留:adapters、 images、lang、plugins、 skins、themes、ckeditor_basic.js、ckeditor_source.js、ckeditor_basic_source.js、 ckeditor.js、config.js 即可,其他的文件可以删除。然后将整个ckeditor放在web工程下,与WEB-INF处于同一级目录。
2、将刚解压的WEB-INF\lib下的ckeditor-java-core-3.5.3.jar包拷贝至web项目的lib下。
3、将ckfinder_java_2.4.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:8080/ProductCenter/jsp/admin/uploadfile/</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' ; //路径需修改
};
6、然后就是CKEditor+CKFinder在jsp页面中应用,如下
a、将如下两句加入jsp页面中
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<%@ taglib uri="http://cksource.com/ckfinder" prefix="ckfinder" %>
b、需要添加编辑组件如下编写
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
<ckeditor:replace replace="editor1" basePath="ckeditor" />
<ckfinder:setupCKEditor basePath="ckfinder" editor="editor1"/>
<!---注意:这里的basePath,需要根据自己的路径定义--->