<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

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

    Java/jsp中集成FCKeditor使用

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

    Java/jsp中集成FCKeditor使用

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

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

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

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

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

    顯示如下的樣子:

     【文本編輯器樣式】

    頁面上相應(yīng)的代碼如下:

    <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ù)或者是后臺(tái)來自文件的txt/html

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

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

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

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

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

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

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

    要提醒一點(diǎn)的是由于你給FCKeditor瘦身,所以常會(huì)報(bào)缺少對(duì)象支持

    等錯(cuò)誤,只要在FCKeditor/editor/lang中加上相應(yīng)的js語言文件即可

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

    FCKeditor/fckeditor.js文件路徑不對(duì)!關(guān)于FCKeditor瘦身可以

    參考網(wǎng)上文章,我還是摘一些要點(diǎn)從網(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.還有一個(gè)問題剛開始使用FCKeditor的人常會(huì)遇到

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

    在fckconfig.js中用使用這樣的標(biāo)簽[]來劃分每行的

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

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

    ["Default"]

    2.下面再說說fckconfig.js中的一些選項(xiàng)來控制toolbarset中的控件

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

    1):取消超鏈接中的瀏覽服務(wù)器和上傳功能,方法如下:

    FCKConfig.LinkBrowser = true ;

    FCKConfig.LinkUpload = true ;

    改為

    FCKConfig.LinkBrowser = false ;

    FCKConfig.LinkUpload = false ;

    2):取消圖片鏈接中的瀏覽服務(wù)器和上傳功能,方法如下:

    FCKConfig.ImageUpload = true ;

    FCKConfig.ImageBrowser = true ;

    改為

    FCKConfig.ImageUpload = false ;

    FCKConfig.ImageBrowser = false ;

    3):Dlg Button中取消高級(jí)功能,方法如下:

    FCKConfig.LinkDlgHideAdvanced = false ;

    FCKConfig.ImageDlgHideAdvanced = false ;

    改為

    FCKConfig.ImageDlgHideAdvanced = true ;

    FCKConfig.LinkDlgHideTarget  = true ;

    下一篇介紹FCKeditor的上傳和瀏覽服務(wù)器功能,以及如何在里面實(shí)現(xiàn)動(dòng)態(tài)

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

    如何實(shí)現(xiàn)對(duì)應(yīng)用戶瀏覽自己的圖片的列表實(shí)現(xiàn)!

     

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

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

    務(wù)器端文件列表功能,這兩個(gè)servlet分別為:

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

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

    現(xiàn)文件上傳)

    1.瀏覽服務(wù)器端文件列表

    web.xml文件中,比如ConnectorServlet中配置選項(xiàng):

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

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

    如果你的baseDir沒有配置,Connector將會(huì)自動(dòng)創(chuàng)建一個(gè)默認(rèn)的文件夾

    userFiles,對(duì)應(yīng)的ConnectorServlet中init()方法中代碼如下:

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

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

    的是Ajax思想來實(shí)現(xiàn)。當(dāng)你點(diǎn)擊瀏覽服務(wù)器(browser server)的時(shí)候

    就會(huì)觸發(fā)一個(gè)異步的javascrīpt + xmlhttp的調(diào)用響應(yīng),后臺(tái)的servlet

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

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

    ConnectorServlet中兩個(gè)私有方法:getFoldersgetFiles

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

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

    文件以后對(duì)應(yīng)用戶瀏覽自己的列表的,我的做法很簡單,建立你用戶名

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

    對(duì)應(yīng)用戶下的文件夾即可,這個(gè)時(shí)候你要修改Connectorservlet中的

    路徑即可!

    2.超連接重定位問題

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

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

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

    ConnectorServlet中傳遞給客戶端的地址的時(shí)候,把它改寫成絕對(duì)URL

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

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

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

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

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

    以上代碼請(qǐng)?jiān)贑onnectorServlet的doGet()里面拼裝!在

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

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

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

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

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

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

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

    URL進(jìn)行重定位到你的對(duì)應(yīng)action中去即可

    3):實(shí)現(xiàn)你的對(duì)應(yīng)action來實(shí)現(xiàn)文件的上傳和下載功能即可!

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

    幾位作為算法校驗(yàn),對(duì)不符合要求的URL連接,filter將會(huì)拒絕重定位到

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

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

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

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

    3.頁面javascrīpt修改

    瀏覽服務(wù)器的功能對(duì)應(yīng)的html/javascrīpt相關(guān)的文件為:browser.html

    和frmresourcelist.html對(duì)應(yīng)你想傳遞的信息你可以append在文件名的

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

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

    標(biāo)識(shí),任何你想要的信息你都可以通過修改ConnectorServlet中的私有

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

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

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

    4.我不是一個(gè)javascrīpt高手,其實(shí)如果我對(duì)javascrīpt了解多一些

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

    FCKeditor裁剪。我還發(fā)現(xiàn)一個(gè)問題,就是FCKeditor2.3自己提供的

    textarea控件一直不能獲得輸入焦點(diǎn),接受文字輸入,如果有高手知道

    怎么修改javascrīpt修復(fù)這個(gè)bug,請(qǐng)也回復(fù)我!

     

    5.注意點(diǎn)

    無論怎么修改別人的東西,請(qǐng)一定尊重開源精神!

    很多人配置好了FCKeditor的上傳功能以后常會(huì)遇到xmlhttp request

    404 error,后面是一串路徑,其實(shí)就是你的servlet-mapping中的路徑

    不對(duì),你只要把xmlhttp request errot 404 后面跟的路徑,copy到

    你的web.xml中對(duì)應(yīng)紅色文字的位置,如下:

    <servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>

    /FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector

    </url-pattern>

    </servlet-mapping>

    別忘了SimpleUploader的servlet-mapping也要做同樣的修改!

    還有一個(gè)錯(cuò)誤就是http 500錯(cuò)誤,這個(gè)可能是你的URL請(qǐng)求不對(duì),應(yīng)該和

    FCKeditor沒關(guān)系的!


    評(píng)論

    # re: Java/jsp中集成FCKeditor使用  回復(fù)  更多評(píng)論   

    2008-04-23 19:34 by wangking
    FCKConfig.FlashUpload = true
    能上傳flash文件,也可以改。
    不過這樣改了后,自己想用完整的功能也不能了。還是,選擇另外一種方法好。把前臺(tái)和后臺(tái)分開。
    在FCKConfig.ToolbarSets["Default"]下加一個(gè)自己調(diào)好的,去年了危險(xiǎn)的功能。如上面所說的這些。
    //取消了圖像、flash、鏈接等有上傳的幾個(gè)項(xiàng)。
    //如果不取消源代碼,那么,在源代碼中輸入<img>后,回來,用鼠標(biāo)右鍵點(diǎn)擊時(shí),還是會(huì)有圖像的選項(xiàng),而且有上傳項(xiàng)。
    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)站的前臺(tái),就調(diào)用這個(gè)my,后臺(tái)就調(diào)用完整的Default。它自己也有一個(gè)節(jié)省的功能Basic,你自己修改修改也能用。

    # re: Java/jsp中集成FCKeditor使用  回復(fù)  更多評(píng)論   

    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使用  回復(fù)  更多評(píng)論   

    2014-10-21 17:37 by asd
    234567890

    # re: Java/jsp中集成FCKeditor使用  回復(fù)  更多評(píng)論   

    2015-11-02 14:32 by
    是是

    # re: Java/jsp中集成FCKeditor使用  回復(fù)  更多評(píng)論   

    2016-01-20 14:50 by td
    ybhhbd
    主站蜘蛛池模板: A级毛片成人网站免费看| 亚洲国产中文v高清在线观看| 精品国产福利尤物免费| 亚洲成A人片在线播放器| 亚洲国产精品久久久久久| 亚洲高清国产拍精品青青草原| 成人女人A级毛片免费软件| 国产成人久久AV免费| 国产精品美女免费视频观看| 亚洲高清国产拍精品熟女| 亚洲性一级理论片在线观看| 亚洲国产成人一区二区三区| av在线亚洲欧洲日产一区二区| 国产极品粉嫩泬免费观看| 成人毛片免费观看| 99在线精品免费视频九九视| 亚洲午夜免费视频| 免费萌白酱国产一区二区三区| 免费VA在线观看无码| 久久精品国产亚洲AV未满十八| 亚洲日韩中文字幕一区| 亚洲欧洲校园自拍都市| 久久亚洲AV午夜福利精品一区 | 亚洲天然素人无码专区| 亚洲毛片基地日韩毛片基地| 亚洲精品线在线观看| 亚洲国产人成网站在线电影动漫| 亚洲精品无码永久中文字幕| 国产av无码专区亚洲av果冻传媒| 亚洲国产一区明星换脸| 亚洲区小说区图片区| 亚洲精品无码日韩国产不卡?V| 一级毛片直播亚洲| 亚洲男人av香蕉爽爽爽爽| 亚洲一区二区三区国产精品| 亚洲最大av无码网址| 亚洲av无码乱码国产精品 | 免费观看男人吊女人视频| 久久99毛片免费观看不卡| 久久永久免费人妻精品| 18以下岁毛片在免费播放|