posts - 0, comments - 77, trackbacks - 0, articles - 356
            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          Java/jsp中集成FCKeditor使用

          Posted on 2007-05-16 15:33 semovy 閱讀(6379) 評論(5)  編輯  收藏 所屬分類: JavaScriptJSPJAVA應用
          2007/4/1

          Java/jsp中集成FCKeditor使用

          最近一直在搞FCKeditor在線文本編輯器的裁剪和集成,總結(jié)了自己的一些

          心得體會,跟大家分享一下自己的經(jīng)驗!

          1.jsp/java中引用FCKeditor步驟和具體做法,參見如下的鏈接:

            a.jsp頁面集成調(diào)用說明;   b.后臺瀏覽和上傳功能集成指南

          注意點:配置好jsp頁面集成FCKeditor的javascrīpt調(diào)用以后,頁面將會

          顯示如下的樣子:

           【文本編輯器樣式】

          頁面上相應的代碼如下:

          <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>

          如果是要想從數(shù)據(jù)庫讀來的文本數(shù)據(jù)或者是后臺來自文件的txt/html

          文本數(shù)據(jù)。只要在
          <textarea name="content" cols="80" rows="4">
          </textarea>

          中加入自己的顯示內(nèi)容的formbean對應字段即可

          <textarea name="content" cols="80" rows="4">

          <c:out value="${ contentData}" />
          </textarea>

          這樣內(nèi)容就會被顯示在FCKeditor編輯框中了,點擊提交按鈕以后就可以

          在后臺的相應java action中得到content參數(shù)中的內(nèi)容就是頁面上

          FCKeditor中的內(nèi)容數(shù)據(jù)了。可以在struts/jsf做使用的哦。

          要提醒一點的是由于你給FCKeditor瘦身,所以常會報缺少對象支持

          等錯誤,只要在FCKeditor/editor/lang中加上相應的js語言文件即可

          如果加載頁面失敗(FCKeditor未定義)還有一個可能就是引用

          FCKeditor/fckeditor.js文件路徑不對!關于FCKeditor瘦身可以

          參考網(wǎng)上文章,我還是摘一些要點從網(wǎng)上:

          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來調(diào)用加載FCKeditor,那么

          就不需要在web.xml中配置fckeditor的tag文件。

          7.還有一個問題剛開始使用FCKeditor的人常會遇到

          就怎么控制它的toolbar的大小和元素排列,其實很簡單。

          在fckconfig.js中用使用這樣的標簽[]來劃分每行的

          元素的多少,這樣就可以控制toolbar的長短和大小了,

          具體示例參看:fckconfig.js中的toolbarset

          ["Default"]

          2.下面再說說fckconfig.js中的一些選項來控制toolbarset中的控件

          的功能,實現(xiàn)功能裁剪:

          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的上傳和瀏覽服務器功能,以及如何在里面實現(xiàn)動態(tài)

          超連接,轉(zhuǎn)發(fā)到servlet經(jīng)過filter以后去調(diào)用服務器的action

          如何實現(xiàn)對應用戶瀏覽自己的圖片的列表實現(xiàn)!

           

          FCKeditor集成java servlet可以實現(xiàn)文件的上傳和服務器端列表讀取功

          能FCKeditor自己提供了兩個servlet來分別實現(xiàn)上傳文件功能,和讀取服

          務器端文件列表功能,這兩個servlet分別為:

          com.fredck.FCKeditor.connector.ConnectorServlet(讀取文件列

          表)com.fredck.FCKeditor.uploader.SimpleUploaderServlet(實

          現(xiàn)文件上傳)

          1.瀏覽服務器端文件列表

          web.xml文件中,比如ConnectorServlet中配置選項:

          <init-param>
             <param-name>baseDir</param-name>
             <param-value>/UserFiles/</param-value>
            </init-param>

          意思在瀏覽服務器上的baseDir配置指定里面的所有文件極其目錄結(jié)構(gòu)列表

          如果你的baseDir沒有配置,Connector將會自動創(chuàng)建一個默認的文件夾

          userFiles,對應的ConnectorServlet中init()方法中代碼如下:

          baseDir=getInitParameter("baseDir");
          if(baseDir==null)
             baseDir="/UserFiles/";

          還想說一下的是,F(xiàn)CKeditor的client調(diào)用server的servlet方法采用

          的是Ajax思想來實現(xiàn)。當你點擊瀏覽服務器(browser server)的時候

          就會觸發(fā)一個異步的javascrīpt + xmlhttp的調(diào)用響應,后臺的servlet

          會去完成你要請求的事件,然后數(shù)據(jù)以xml方式返回給client來解析。

          很明顯,你要實現(xiàn)去數(shù)據(jù)庫或者其他的文件系統(tǒng)請求列表,你只要修改

          ConnectorServlet中兩個私有方法:getFoldersgetFiles

          讓它去你指定的地方得到文件列表即可,這樣你的文件可以放在任何你

          指定目錄下。多說一句,很多人都想知道個人blog系統(tǒng)中怎么實現(xiàn)上傳

          文件以后對應用戶瀏覽自己的列表的,我的做法很簡單,建立你用戶名

          的文件夾,你上傳只能上傳到你的目錄夾,瀏覽可以通過程序指定瀏覽

          對應用戶下的文件夾即可,這個時候你要修改Connectorservlet中的

          路徑即可!

          2.超連接重定位問題

          FCKeditor可以插入超連接,實現(xiàn)對文件的預覽功能,只要我們稍微改變

          我們可以使FCKeditor編輯器支持對任意文件系統(tǒng)下的任意文件的客戶端

          瀏覽和下載保存!FCKeditor本來提供的是相對URL超連接,只要我們修改

          ConnectorServlet中傳遞給客戶端的地址的時候,把它改寫成絕對URL

          然后再通過我們自己的filter的servlet實現(xiàn)重定向去一個下載/瀏覽

          文件的struts的action方法就可以實現(xiàn)在客戶端對超連接文件的下載和

          瀏覽!說一下具體做法吧:

          1):修改ConnectorServlet傳遞給客戶端javascrīpt的路徑,代碼如下

          String currentUrl= "http://" + request.getserver +request.getServerPort + request.getContextPath +resourcePath;

          以上代碼請在ConnectorServlet的doGet()里面拼裝!在

          調(diào)用CreateCommonXml()私有方法的時候參數(shù)傳入

          myEl.setAttribute("path",currentPath);
          myEl.setAttribute("url",currentUrl);

          提醒一下resourcePath為在web.xml配置文件中ConnectorServlet中

          的一個初始化參數(shù)配置,等一下利用filter實現(xiàn)對超連接的重定位就提取

          URL中的這個配置參數(shù)來判斷,配置如下:

          <init-param>
             <param-name>resourcePath</param-name>
             <param-value>/fileSystem/</param-value>
          </init-param>

          2):建立你的filter servlet,實現(xiàn)對URL的截獲,對符合要求的

          URL進行重定位到你的對應action中去即可

          3):實現(xiàn)你的對應action來實現(xiàn)文件的上傳和下載功能即可!

          4):擴展功能-實現(xiàn)對URL的加密,對連接的URL中加上一串字符,最后

          幾位作為算法校驗,對不符合要求的URL連接,filter將會拒絕重定位到

          指定action。此外利用自己寫的擴展類還可以實現(xiàn)對超連接的文件類型

          進行限制,比如你只能超連接JPG|GIF|DOC|TXT|HTML等幾種后綴名的

          文件,對其他文件即使你指定超連接也讓你瀏覽和下載,這些都可以在

          web.xml中通過修改對應servlet的配置文件的初始化參數(shù)實現(xiàn)。

          3.頁面javascrīpt修改

          瀏覽服務器的功能對應的html/javascrīpt相關的文件為:browser.html

          和frmresourcelist.html對應你想傳遞的信息你可以append在文件名的

          字符串后面,在GetFileRowHtml()的javascrīpt函數(shù)中實現(xiàn)對文件

          名的截取,這樣client只會顯示文件名,而你可以得到文件的數(shù)據(jù)庫唯一

          標識,任何你想要的信息你都可以通過修改ConnectorServlet中的私有

          方法getFiles()來實現(xiàn),只要修改頁面frmresurcelist.html中的

          GetFileRowHtml()中傳入變量fileName即可。你還可以在點擊選中

          文件的時候?qū)崿F(xiàn)一個你自己的Ajax調(diào)用,一切取決你的項目需要!

          4.我不是一個javascrīpt高手,其實如果我對javascrīpt了解多一些

          也許對客戶端的代碼修改以后做出更眩的功能。可以更好的完成對

          FCKeditor裁剪。我還發(fā)現(xiàn)一個問題,就是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沒關系的!


          評論

          # re: Java/jsp中集成FCKeditor使用  回復  更多評論   

          2008-04-23 19:34 by wangking
          FCKConfig.FlashUpload = true
          能上傳flash文件,也可以改。
          不過這樣改了后,自己想用完整的功能也不能了。還是,選擇另外一種方法好。把前臺和后臺分開。
          在FCKConfig.ToolbarSets["Default"]下加一個自己調(diào)好的,去年了危險的功能。如上面所說的這些。
          //取消了圖像、flash、鏈接等有上傳的幾個項。
          //如果不取消源代碼,那么,在源代碼中輸入<img>后,回來,用鼠標右鍵點擊時,還是會有圖像的選項,而且有上傳項。
          FCKConfig.ToolbarSets["my"] = [
          ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
          ['OrderedList','UnorderedList','-','Outdent','Indent'],
          ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
          ['Unlink'],
          ['Table','Rule','Smiley','SpecialChar'],


          ['PasteText','PasteWord'],
          ['Undo','Redo','RemoveFormat'],
          ['Preview'],
          '/',

          ['Style','FontFormat','FontName','FontSize'],
          ['TextColor','BGColor'],
          ['FitWindow','ShowBlocks'] // No comma for the last row.
          ] ;
          這樣,在網(wǎng)站的前臺,就調(diào)用這個my,后臺就調(diào)用完整的Default。它自己也有一個節(jié)省的功能Basic,你自己修改修改也能用。

          # re: Java/jsp中集成FCKeditor使用  回復  更多評論   

          2013-08-26 17:22 by 張海豐
          我的代表<k:textarea property="content" styleId="editContent" rows="15" cols="80" validateRules="{maxLength:500}"/>
          要怎么引用到
          var ōFCKeditor = new FCKeditor('content') ;
          oFCKeditor.BasePath = "FCKeditor/";
          oFCKeditor.Height = 400;
          oFCKeditor.ToolbarSet = "Default" ;
          oFCKeditor.ReplaceTextarea();
          求解!

          # re: Java/jsp中集成FCKeditor使用  回復  更多評論   

          2014-10-21 17:37 by asd
          234567890

          # re: Java/jsp中集成FCKeditor使用  回復  更多評論   

          2015-11-02 14:32 by
          是是

          # re: Java/jsp中集成FCKeditor使用  回復  更多評論   

          2016-01-20 14:50 by td
          ybhhbd
          主站蜘蛛池模板: 习水县| 巨鹿县| 穆棱市| 科技| 平湖市| 福贡县| 海丰县| 吴旗县| 雷波县| 伊川县| 太保市| 广西| 泸溪县| 靖远县| 马关县| 晋中市| 莱阳市| 南华县| 高清| 岚皋县| 探索| 化德县| 万州区| 台江县| 迁安市| 微博| 昔阳县| 安国市| 佳木斯市| 巴中市| 陕西省| 大理市| 四川省| 崇信县| 兴宁市| 小金县| 浠水县| 嫩江县| 青龙| 常山县| 霸州市|