1. 從http://ckeditor.com中下載下傳ckeditor for java和ckfinder for java。
2. 将下載下傳的檔案解壓,将ckeditor檔案夾和ckfinder檔案夾放置到項目根目錄下,其中ckfinder檔案夾在ckfinder*.war中。
3. ckfinder*.war的WEB-INF目錄下有一個config.xml檔案,将之放置在項目的WEB-INF目錄下,打開它,并進行相應修改:
<config>
<enabled>true</enabled><!--是否開啟圖檔上傳功能--!>
<baseDir></baseDir>
<baseURL>/ruisystem/userfiles/</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>
4. 打開ckeditor/config.js作相應修改,以下是我的修改:
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function(config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.height = '700px';
config.font_names = '新細明體/PMingLiU;細明體/MingLiU;标楷體/DFKai-SB;黑體/SimHei;宋體/SimSun;新宋體/NSimSun;仿宋/FangSong;楷體/KaiTi;仿宋_GB2312/FangSong_GB2312楷體_GB2312/KaiTi_GB2312;微軟正黑體/Microsoft JhengHei;微軟雅黑體/Microsoft YaHei;隸書/LiSu;幼圓/YouYuan;華文細黑/STXihei;華文楷體/STKaiti;華文宋體/STSong;華文中宋/STZhongsong;華文仿宋/STFangsong;方正舒體/FZShuTi;方正姚體/FZYaoti;華文彩雲/STCaiyun;華文琥珀/STHupo;華文隸書/STLiti;華文行楷/STXingkai;華文新魏/STXinwei;'
+ config.font_names;
};
5. 将ckeditor-java-core-v.jar和ckfinder*.war的WEB-INF/lib目錄下的所有jar包複制到項目中。
6. 打開要使用ckeditor的頁面,首先引入兩個js:
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
7. 在需要使用ckeditor的域下面添加一些代碼:
<textarea rows="2" cols="2" name="content" id="content"></textarea>
<script type="text/javascript">
if (CKEDITOR.instances['content']) {
CKEDITOR.remove(CKEDITOR.instances['content']);
}
var basePath = '你的位置';
CKEDITOR
.replace(
'content',
{
filebrowserBrowseUrl : basePath
+ '/ckfinder/ckfinder.htm',
filebrowserImageBrowseUrl : basePath
+ '/ckfinder/ckfinder.htm?type=Images',
filebrowserFlashBrowseUrl : basePath
+ '/ckfinder/ckfinder.htm?type=Flash',
filebrowserUploadUrl : basePath
+ '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : basePath
+ '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : basePath
+ '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
filebrowserWindowWidth : '1000',
filebrowserWindowHeight : '1000'
});
</script>
8. 在web.xml中添加如下代碼:
<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>
<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> 1 </load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern>
</servlet-mapping>
啟動tomcat,開始體驗吧。