速動畫教程第二十集? 在線編輯器 FCKeditor 的應用
?
下載地址：
http://sonic.peakle.net/download/sonic020.rar
下載地址2:?
http://this.oksonic.cn
開發環境：
???
Tomcat5.5?? Eclipse3.1.1?? MyEclipse4.1.1
?
FCKeditor 版本 FCKeditor_2.2?? FCKeditor.Java 2.3 這里需要用到兩個包
下載地址：
http://www.fckeditor.net/download/default.html
?
開始：
?
新建工程，名稱為
FCKeditor
?
解壓
FCKeditor_2.2
包中的
edit
文件夾到項目中的
WebRoot
目錄
解壓
FCKeditor_2.2
包中的
fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml
文件夾到項目中的
WebRoot
目錄
解壓
FCKeditor-2.3.zip
包中的
\web\WEB-INF\lib
下的兩個
jar
文件到項目的
WebRoot\WEB-INF\lib
目錄
解壓
FCKeditor-2.3.zip
包中的
\src
下的
FCKeditor.tld
文件到項目的
WebRoot\WEB-INF
目錄
刪除
WebRoot\edit
目錄下的
_source
文件夾
?
刷新一下工程，有一個文件會出錯，不管它是什么錯，將錯誤信息清除
?
修改
web.xml
文件，加入以下內容
??? <servlet>
??????? <servlet-name>Connector</servlet-name>
??????? <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
??????? <init-param>
??????????? <param-name>baseDir</param-name>
???????????
<!-- 此為文件瀏覽路徑 -->
??????????? <param-value>/UserFiles/</param-value>
??????? </init-param>
??????? <init-param>
??????????? <param-name>debug</param-name>
??????????? <param-value>true</param-value>
??????? </init-param>
??????? <load-on-startup>1</load-on-startup>
??? </servlet>
?
??? <servlet>
??????? <servlet-name>SimpleUploader</servlet-name>
??????? <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
??????? <init-param>
??????????? <param-name>baseDir</param-name>
???????????
<!-- 此為文件上傳路徑，需要在WebRoot 目錄下新建 UserFiles 文件夾 -->
??????????? <!-- 根據文件的類型還需要新建相關的文件夾 Image、
Flash
-->
??????????? <param-value>/UserFiles/</param-value>
??????? </init-param>
??????? <init-param>
??????????? <param-name>debug</param-name>
??????????? <param-value>true</param-value>
??????? </init-param>
??????? <init-param>
???????????
<!-- 此參數為是否開啟上傳功能 -->
??????????? <param-name>enabled</param-name>
??????????? <param-value>false</param-value>
??????? </init-param>
??????? <init-param>
??????????? <param-name>AllowedExtensionsFile</param-name>
??????????? <param-value></param-value>
??????? </init-param>
??????? <init-param>
???????????
<!-- 此參數為文件過濾，以下的文件類型都不可以上傳 -->
??????????? <param-name>DeniedExtensionsFile</param-name>
???????
??? <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
??????? </init-param>
??????? <init-param>
??????????? <param-name>AllowedExtensionsImage</param-name>
??????????? <param-value>jpg|gif|jpeg|png|bmp</param-value>
??????? </init-param>
??????? <init-param>
??????????? <param-name>DeniedExtensionsImage</param-name>
??????????? <param-value></param-value>
??????? </init-param>
??????? <init-param>
??????????? <param-name>AllowedExtensionsFlash</param-name>
??????????? <param-value>swf|fla</param-value>
??????? </init-param>
??????? <init-param>
??????????? <param-name>DeniedExtensionsFlash</param-name>
??????????? <param-value></param-value>
??????? </init-param>
??????? <load-on-startup>1</load-on-startup>
??? </servlet>
?
? <servlet-mapping>
??? <servlet-name>Connector</servlet-name>
??? <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
? </servlet-mapping>
?
? <servlet-mapping>
??? <servlet-name>SimpleUploader</servlet-name>
??? <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
? </servlet-mapping>
?
?
新建一個提交頁
test.jsp
文件和一個接收頁
test1.jsp
文件
?
test.jsp
代碼如下：
<%@
page
contentType
=
"text/html;charset=UTF-8"
language
=
"java"
%>
<%@
taglib
uri
=
"/WEB-INF/FCKeditor.tld"
prefix
=
"fck"
%>
<
html
>
?
<
head
>
???
<
title
>
Test
</
title
>
?
</
head
>
?
?
<
body
>
???
<
FORM
action
=
"test1.jsp"
>
???
<
fck:editor
id
=
"testfck"
basePath
=
"/FCKeditor/"
???
height
=
"100%"
???
skinPath
=
"/FCKeditor/editor/skins/default/"
???
toolbarSet
=
"Default"
???
???
imageBrowserURL
=
"/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
???
???
linkBrowserURL
=
"/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
???
???
flashBrowserURL
=
"/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
???
imageUploadURL
=
"/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
??????
linkUploadURL
=
"/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
??????
flashUploadURL
=
"/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"
>
???
</
fck:editor
>
???
</
FORM
>
?
</
body
>
</
html
>
?
?
test1.jsp
代碼如下：
<
html
>
?
<
head
>
???
<
title
>
TEST
</
title
>
?
</
head
>
?
?
<
body
>
???
<%=
request.getParameter(
"testfck"
)
%>
?
</
body
>
</
html
>
?
在
WebRoot
目錄下新建
UserFiles
文件夾，在此文件夾下新建
Image
和
Flash
兩個文件夾
這樣就可以了，現在測試
?
剛出現的錯誤就是這里了，必須改為
true
?
看來這里有BUG，兩個不同的提交一個亂碼，一個正常！
?
現在需要減少一些不必要的文件
刪除
\WebRoot\editor\filemanager\browser\default\connectors
目錄下所有的文件，這些是用來瀏覽文件的，對于jsp的話是使用了 servlet 來處理，所以這些文件都是多余的
?
同樣的，上傳部份的文件也不需要。刪除
\WebRoot\editor\filemanager\upload
目錄下所有的文件
?
刪除
WebRoot\editor\lang
目錄下不需要的語言，如保留中文和英文還有
fcklanguagemanager.js
文件
?
刪除
\WebRoot\editor\skins
目錄下不需要的皮膚文件，有三種皮膚，可根據需要進行刪除
?
刪除
\WebRoot\editor\dialog\fck_image
目錄下
fck_image_preview.html
文件中的部份文字，這些文字是出現在瀏覽圖片時在預覽框中的內容
?
需要注意一個問題，如果你正在使用 Maxthon 作為默認的游覽器的話，它的廣告過濾機制會將彈出的圖片選擇頁過濾掉，如果已經設置了充許過濾的話，還需要注意它會將圖片選擇頁作為一個新頁面出現到后臺，，我在使用的過程中因為這個原因無法調試，所以改用 IE 進行調試
?
圖片文件需要英文名稱。
?
這集就介紹到這里吧！下回見