最近一直在搞FCKeditor在線文本編輯器的裁剪和集成,總結了自己的一些
心得體會,跟大家分享一下自己的經驗!
1.jsp/java中引用FCKeditor步驟和具體做法,參見如下的鏈接:
a.jsp頁面集成調用說明; b.后臺瀏覽和上傳功能集成指南;
注意點:配置好jsp頁面集成FCKeditor的javascrīpt調用以后,頁面將會
顯示如下的樣子:
【文本編輯器樣式】
頁面上相應的代碼如下:
<scrīpt type="text/javascrīpt" src="FCKeditor/fckeditor.js"></scrīpt> |
<textarea name="content" cols="80" rows="4"> </textarea> <scrīpt type="text/javascrīpt"> var ōFCKeditor = new FCKeditor('content') ; oFCKeditor.BasePath = "FCKeditor/"; oFCKeditor.Height = 400; oFCKeditor.ToolbarSet = "Default" ; oFCKeditor.ReplaceTextarea(); </scrīpt> |
如果是要想從數據庫讀來的文本數據或者是后臺來自文件的txt/html
文本數據。只要在
<textarea name="content" cols="80" rows="4"> </textarea> |
中加入自己的顯示內容的formbean對應字段即可
<textarea name="content" cols="80" rows="4">
<c:out value="${ contentData}" /> </textarea>
|
這樣內容就會被顯示在FCKeditor編輯框中了,點擊提交按鈕以后就可以
在后臺的相應java action中得到content參數中的內容就是頁面上
FCKeditor中的內容數據了。可以在struts/jsf做使用的哦。
要提醒一點的是由于你給FCKeditor瘦身,所以常會報缺少對象支持
等錯誤,只要在FCKeditor/editor/lang中加上相應的js語言文件即可
如果加載頁面失敗(FCKeditor未定義)還有一個可能就是引用
FCKeditor/fckeditor.js文件路徑不對!關于FCKeditor瘦身可以
參考網上文章,我還是摘一些要點從網上:
1、將FCKeditor目錄下及子目錄下所有以”_”下劃線開
頭的文件夾刪除
2.FCKeditor根目錄下只保留fckconfig.js,
fckeditor.js, fckstyles.xml, fcktemplates.xml
其余全部刪除
3.將editor/filemanager/upload目錄下文件及文件夾
清空.
4.還可以將editor/skins目錄下的皮膚文件刪除,只留下
default一套皮膚(如果你不需要換皮膚的話)
5.還可以將editor/lang目錄下文件刪除,只保留
en.js, fcklanguagemanager.js, zh-cn.js, zh.js
文件
6.如果你是使用javascrīpt來調用加載FCKeditor,那么
就不需要在web.xml中配置fckeditor的tag文件。
7.還有一個問題剛開始使用FCKeditor的人常會遇到
就怎么控制它的toolbar的大小和元素排列,其實很簡單。
在fckconfig.js中用使用這樣的標簽[]來劃分每行的
元素的多少,這樣就可以控制toolbar的長短和大小了,
具體示例參看:fckconfig.js中的toolbarset
["Default"]
|
2.下面再說說fckconfig.js中的一些選項來控制toolbarset中的控件
的功能,實現功能裁剪:
1):取消超鏈接中的瀏覽服務器和上傳功能,方法如下:
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkUpload = true ;
改為
FCKConfig.LinkBrowser = false ;
FCKConfig.LinkUpload = false ;
|
2):取消圖片鏈接中的瀏覽服務器和上傳功能,方法如下:
FCKConfig.ImageUpload = true ;
FCKConfig.ImageBrowser = true ;
改為
FCKConfig.ImageUpload = false ;
FCKConfig.ImageBrowser = false ;
|
3):Dlg Button中取消高級功能,方法如下:
FCKConfig.LinkDlgHideAdvanced = false ;
FCKConfig.ImageDlgHideAdvanced = false ;
改為
FCKConfig.ImageDlgHideAdvanced = true ;
FCKConfig.LinkDlgHideTarget = true ;
|
下一篇介紹FCKeditor的上傳和瀏覽服務器功能,以及如何在里面實現動態
超連接,轉發到servlet經過filter以后去調用服務器的action
如何實現對應用戶瀏覽自己的圖片的列表實現!
FCKeditor集成java servlet可以實現文件的上傳和服務器端列表讀取功
能FCKeditor自己提供了兩個servlet來分別實現上傳文件功能,和讀取服
務器端文件列表功能,這兩個servlet分別為:
com.fredck.FCKeditor.connector.ConnectorServlet(讀取文件列
表)com.fredck.FCKeditor.uploader.SimpleUploaderServlet(實
現文件上傳)
1.瀏覽服務器端文件列表
web.xml文件中,比如ConnectorServlet中的配置選項:
<init-param> <param-name>baseDir</param-name> <param-value>/UserFiles/</param-value> </init-param> |
意思在瀏覽服務器上的baseDir配置指定里面的所有文件極其目錄結構列表
如果你的baseDir沒有配置,Connector將會自動創建一個默認的文件夾
userFiles,對應的ConnectorServlet中init()方法中代碼如下:
baseDir=getInitParameter("baseDir"); if(baseDir==null) baseDir="/UserFiles/"; |
還想說一下的是,FCKeditor的client調用server的servlet方法采用
的是Ajax思想來實現。當你點擊瀏覽服務器(browser server)的時候
就會觸發一個異步的javascrīpt + xmlhttp的調用響應,后臺的servlet
會去完成你要請求的事件,然后數據以xml方式返回給client來解析。
很明顯,你要實現去數據庫或者其他的文件系統請求列表,你只要修改
ConnectorServlet中兩個私有方法:getFolders 和 getFiles
讓它去你指定的地方得到文件列表即可,這樣你的文件可以放在任何你
指定目錄下。多說一句,很多人都想知道個人blog系統中怎么實現上傳
文件以后對應用戶瀏覽自己的列表的,我的做法很簡單,建立你用戶名
的文件夾,你上傳只能上傳到你的目錄夾,瀏覽可以通過程序指定瀏覽
對應用戶下的文件夾即可,這個時候你要修改Connectorservlet中的
路徑即可!
2.超連接重定位問題
FCKeditor可以插入超連接,實現對文件的預覽功能,只要我們稍微改變
我們可以使FCKeditor編輯器支持對任意文件系統下的任意文件的客戶端
瀏覽和下載保存!FCKeditor本來提供的是相對URL超連接,只要我們修改
ConnectorServlet中傳遞給客戶端的地址的時候,把它改寫成絕對URL
然后再通過我們自己的filter的servlet實現重定向去一個下載/瀏覽
文件的struts的action方法就可以實現在客戶端對超連接文件的下載和
瀏覽!說一下具體做法吧:
1):修改ConnectorServlet傳遞給客戶端javascrīpt的路徑,代碼如下
String currentUrl= "http://" + request.getserver +request.getServerPort + request.getContextPath +resourcePath;
以上代碼請在ConnectorServlet的doGet()里面拼裝!在
調用CreateCommonXml()私有方法的時候參數傳入
myEl.setAttribute("path",currentPath); myEl.setAttribute("url",currentUrl);
|
提醒一下resourcePath為在web.xml配置文件中ConnectorServlet中
的一個初始化參數配置,等一下利用filter實現對超連接的重定位就提取
URL中的這個配置參數來判斷,配置如下:
<init-param> <param-name>resourcePath</param-name> <param-value>/fileSystem/</param-value> </init-param>
|
2):建立你的filter servlet,實現對URL的截獲,對符合要求的
URL進行重定位到你的對應action中去即可
3):實現你的對應action來實現文件的上傳和下載功能即可!
4):擴展功能-實現對URL的加密,對連接的URL中加上一串字符,最后
幾位作為算法校驗,對不符合要求的URL連接,filter將會拒絕重定位到
指定action。此外利用自己寫的擴展類還可以實現對超連接的文件類型
進行限制,比如你只能超連接JPG|GIF|DOC|TXT|HTML等幾種后綴名的
文件,對其他文件即使你指定超連接也讓你瀏覽和下載,這些都可以在
web.xml中通過修改對應servlet的配置文件的初始化參數實現。
3.頁面javascrīpt修改
瀏覽服務器的功能對應的html/javascrīpt相關的文件為:browser.html
和frmresourcelist.html對應你想傳遞的信息你可以append在文件名的
字符串后面,在GetFileRowHtml()的javascrīpt函數中實現對文件
名的截取,這樣client只會顯示文件名,而你可以得到文件的數據庫唯一
標識,任何你想要的信息你都可以通過修改ConnectorServlet中的私有
方法getFiles()來實現,只要修改頁面frmresurcelist.html中的
GetFileRowHtml()中傳入變量fileName即可。你還可以在點擊選中
文件的時候實現一個你自己的Ajax調用,一切取決你的項目需要!
4.我不是一個javascrīpt高手,其實如果我對javascrīpt了解多一些
也許對客戶端的代碼修改以后做出更眩的功能。可以更好的完成對
FCKeditor裁剪。我還發現一個問題,就是FCKeditor2.3自己提供的
textarea控件一直不能獲得輸入焦點,接受文字輸入,如果有高手知道
怎么修改javascrīpt修復這個bug,請也回復我!
5.注意點
無論怎么修改別人的東西,請一定尊重開源精神!
很多人配置好了FCKeditor的上傳功能以后常會遇到xmlhttp request
404 error,后面是一串路徑,其實就是你的servlet-mapping中的路徑
不對,你只要把xmlhttp request errot 404 后面跟的路徑,copy到
你的web.xml中對應紅色文字的位置,如下:
<servlet-mapping> <servlet-name>Connector</servlet-name> <url-pattern>
/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector
</url-pattern>
</servlet-mapping>
|
別忘了SimpleUploader的servlet-mapping也要做同樣的修改!
還有一個錯誤就是http 500錯誤,這個可能是你的URL請求不對,應該和
FCKeditor沒關系的!