Java培訓實戰教程之CKEditor+CKFinder整合項目開發文本編輯器功能


Java培訓實戰教程之CKEditor+CKFinder整合項目開發文本編輯器功能

CKFinder實現文件上傳功能

本文使用:jsp整合ckeditor和ckfinder完成在網頁上嵌套文本編輯器,並實現圖片上傳功能。
在項目中我們曾經可能都使用過FckEditor文本編輯器,該技術在論壇、互聯網的項目中顯得尤為重要。但現在最新又出來了個ckEditor,其實我們到官方網站看看就知道FckEditor在2.6版本之后就改名為ckEditor了。但是這個CkEditor本身支持在頁面上嵌套文本編輯器功能,不支持圖片、文件、flash文件上傳等功能,那該怎么辦呢?你可以在文本編輯器的基礎上自己開發圖片上傳功能,當然也可以使用CKFinder插件,我們這里就給大家介紹一下CKEditor與 CKFinder 整合項目開發,完成文本編輯器功能以及圖片上傳功能。

下面給大家介紹操作的步驟,大家不妨動手試試看啊。  

一.需要的資源:
請大家到網站上下載對應的3個包:
a) ckeditor_3.6.2 (解壓)
b) ckeditor-java-3.6.2 (解壓)
c) ckfinder_java_2.3.1 (解壓)
其中:
ckeditor_3.6.2:實現頁面文本編輯器功能
ckeditor-java-3.6.2:實現文本編輯器的java源碼包
ckfinder_java_2.3.1:實現文件上傳,圖片上傳的java源碼包
二.執行步驟:
第1步.MyEclipse新建 Web工程 :例如itcastCKEditor。
第2步.解壓ckfinder_java_2.3.1,導入相應的jar包,目錄在ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\lib下的8個jar包。
這里寫圖片描述
以及:ckeditor-java-3.6.2\WEB-INF\lib下的1個jar包,共9個包
這里寫圖片描述

第3步. 復制以下文件夾到WebRoot 下面:
(1)目錄:ckfinder_java_2.3.1\ckfinder\CKFinderJava\ckfinder
這里寫圖片描述
(2)目錄:ckeditor_3.6.2\ckeditor
這里寫圖片描述
第4步. 復制 CKFinder配置文件 到項目的WEB-INF 下面:
ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\config.xml的config.xml放置到項目的WEB-INF下面,這個配置文件需要我們配置一些信息,別着急,往后看。
三.下面刪除無用的文件,建議刪除,可減少項目的碎片文件
首先是ckeditor文件夾下面的文件:
_sample文件夾,_source文件夾, CHANGES.html, ckeditor_php4.php , ckeditor_php5.php,
ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html
然后是ckfinder文件夾下面的文件:
_samples文件夾, help文件夾, changelog.txt, install.txt, license.txt, translation.txt
四.修改配置文件config.xml
Xml代碼

true

<types>
<type name="Files">
<url>/itcastCKEditor%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>/itcastCKEditor%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>/itcastCKEditor%BASE_URL%flash/</url>
<directory>%BASE_DIR%flash</directory>
<maxSize>0</maxSize>
<allowedExtensions>swf,flv</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
</types>

五.在web.xml 中配置:
即將CKFinder文件上傳的插件需要通過的配置才能整合到項目中,所以需要在web.xml中添加:
Xml代碼

<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>
<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>
<session-config>
<session-timeout>10</session-timeout>
</session-config>< 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 >
< 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 >
< session-config >
< session-timeout > 10 </ session-timeout >
</ session-config >

六. 修改項目中WebRoot下的ckeditor/config.js文件的內容
該文件配置文本編輯器在頁面上顯示的樣式,以及整合CKFinder插件。
Js代碼

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';


//配置默認配置
config.language = 'zh-cn'; //配置語言
config.uiColor = '#FFF'; //背景顏色
config.width = 400; //寬度
config.height = 400; //高度
config.skin = 'v2'; //編輯器皮膚樣式,office,kama風格
// 取消 “拖拽以改變尺寸”功能
config.resize_enabled = false;
// 使用基礎工具欄
// config.toolbar = "Basic";
// 使用全能工具欄
// config.toolbar = "Full";
//使用自定義工具欄
config.toolbar =
[
['Source', 'Preview', '-'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','PageBreak'],
'/',
['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
'/',
['Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-', 'About']
];
/*** 這里需要配置文件上傳功能的CKFinder插件*/
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';
};CKEDITOR.editorConfig = function (config) {
config.filebrowserBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html' ;
config.filebrowserImageBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images' ;
config.filebrowserFlashBrowseUrl = '/CKEditor_Finder/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.filebrowserWindowWidth = '1000';
config.filebrowserWindowHeight = '700';
};

注意:紅色的代碼一定要配置,如ckfinder/ckfinder.html表示在項目的根目錄下需要配置,例如itcastCKEditor/ckfinder/ckfinder.html,但如果在項目的根目錄下出現命名空間,例如itcastCKEditor/system/ckfinder/ckfinder.html中的system,此時可以使用../ckfinder/ckfinder.html相對路徑的方式尋找路徑,保證路徑的准確。
七.修改index.jsp頁面的內容:
Jsp代碼如下:

<%@ page language="java" pageEncoding="UTF-8"%>
<script language="javascript" src="${pageContext.request.contextPath }/ckeditor/ckeditor.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/ckfinder/ckfinder.js"></script>
<html>
<head>

</head>

<body>
<form name="frmList" action="" enctype="multipart/form-data">
<div align="center">
<TABLE width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<TR>
<TD valign="top" width="63%" height="100%">
<table width="100%" cellpadding="0">
<tr id="content1">
<td class="tdRight">
<textarea id="ebreContent" name="ebreContent" rows="8" cols="52" class="ckeditor"></textarea>
<!--使用文本編輯器替換名稱是ebreContent的文本域-->
<script type="text/javascript">
CKEDITOR.replace("ebreContent",{ height: 200, width: 820 });
</script>
</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
</div>
</form>
</body>
</html>

訪問http://localhost:8080/itcastCKEditor/可以看到效果:
這里寫圖片描述
八:注意:
上傳圖片出現問題,圖片不能上傳到指定的位置。
原因:fck的servlet被struts2轉發了,不能使用/*過濾掉所以的url
解決:在web.xml中修改filter-mapping 將

<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
修改成
<filter>
<filter-name>struts2</filter-name>
<filter-class> org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.do</url-pattern>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com