龍行天下

            政 博
          隨筆 - 23, 文章 - 0, 評(píng)論 - 12, 引用 - 0
          數(shù)據(jù)加載中……

          2008年1月5日

          FckEditor中文配置手冊(cè)詳細(xì)說明

          javascript調(diào)用方式:
          ------------------------------------
          <script. type=”text/javascript” src=”FCKeditor/fckeditor.js”></scrīpt>
          <textarea name=”content” cols=”80″ rows=”4″>
          </textarea>
          <script. type=”text/javascript”>
          var FCKeditor = new FCKeditor(”content”);
          oFCKeditor.BasePath = “FCKeditor/”;
          oFCKeditor.Height = 400;
          oFCKeditor.ToolbarSet = “Default”;
          oFCKeditor.ReplaceTextarea();
          </script>
          ------------------------------------
          如果想要使用從數(shù)據(jù)庫(kù)讀來的文本數(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)容就是頁(yè)面上FCKeditor中的內(nèi)容數(shù)據(jù)了。可以在struts/jsf中使用。
          ====================================
          由于給FCKeditor瘦身,所以常會(huì)報(bào)缺少對(duì)象支持等錯(cuò)誤,只要在FCKeditor/editor/lang中加上相應(yīng)的js語言文件即可。如果加載頁(yè)面失敗(FCKeditor未定義)還有一個(gè)可能就是引用FCKeditor/fckeditor.js文件路徑不對(duì)!
          關(guān)于FCKeditor瘦身要點(diǎn)如下:
          1.將FCKeditor目錄下及子目錄下所有以“_”下劃線開頭的文件夾刪除
          2.FCKeditor根目錄下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml,其余全部刪除
          3.將editor/filemanager/upload目錄下文件及文件夾清空
          4.將/editor/filemanager/browser/default/connectors/下的所有文件刪除
          5.還可以將editor/skins目錄下的皮膚文件刪除,只留下default一套皮膚(如果你不需要換皮膚的話)
          6.還可以將editor/lang目錄下文件刪除,只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件
          7.如果你是使用javascrīpt來調(diào)用加載FCKeditor,那么就不需要在web.xml中配置fckeditor的tag文件。
          8.還有一個(gè)問題剛開始使用FCKeditor的人常會(huì)遇到就怎么控制它的toolbar的大小和元素排列,其實(shí)很簡(jiǎn)單。
          在fckconfig.js中用這樣的標(biāo)簽[]來劃分每行的元素的多少,這樣就可以控制toolbar的長(zhǎng)短和大小了,具體示例參看:fckconfig.js中的toolbarset[”Default”]
          ====================================
          用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ù)庫(kù)或者其他的文件系統(tǒng)請(qǐng)求列表,你只要修改
          ConnectorServlet中兩個(gè)私有方法:getFolders 和 getFiles
          讓它去你指定的地方得到文件列表即可,這樣你的文件可以放在任何你指定目錄下。多說一句,很多人都想知道個(gè)人blog系統(tǒng)中怎么實(shí)現(xiàn)上傳文件以后對(duì)應(yīng)用戶瀏覽自己的列表的,我的做法很簡(jiǎn)單,建立你用戶名的文件夾,你上傳只能上傳到你的目錄夾,瀏覽可以通過程序指定瀏覽對(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.頁(yè)面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ù)庫(kù)唯一標(biāo)識(shí),任何你想要的信息你都可以通過修改ConnectorServlet中的私有方法getFiles()來實(shí)現(xiàn),只要修改頁(yè)面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裁剪。
          -------------------------------------
          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)系的!
          ======================================
          fckconfig.js總配置文件,可用記錄本打開,修改后將文件存為utf-8 編碼格式。找到:
          --------------------------------------
          FCKConfig.TabSpaces = 0;
          改為:
          FCKConfig.TabSpaces = 1;
          即在編輯器域內(nèi)可以使用Tab鍵。
          如果你的編輯器還用在網(wǎng)站前臺(tái)的話,比如說用于留言本或是日記回復(fù)時(shí),那就不得不考慮安全了,
          在前臺(tái)千萬不要使用Default的toolbar,要么自定義一下功能,要么就用系統(tǒng)已經(jīng)定義好的Basic,
          也就是基本的toolbar,找到:
          --------------------------------------
          FCKConfig.ToolbarSets[”Basic”] = [
          [’Bold’,'Italic’,'-’,'OrderedList’,'UnorderedList’,'-’,/*’Link’,*/’Unlink’,'-’,'Style’,'FontSize’,'TextColor’,'BGColor’,'-’,
          ‘Smiley’,'SpecialChar’,'Replace’,'Preview’] ];
          這是改過的Basic,把圖像功能去掉,把添加鏈接功能去掉,因?yàn)閳D像和鏈接和flash和圖像按鈕添加功能都能讓前臺(tái)頁(yè)直接訪問和上傳文件, fckeditor還支持編輯域內(nèi)的鼠標(biāo)右鍵功能。
          FCKConfig.ContextMenu = [’Generic’,/*’Link’,*/’Anchor’,/*’Image’,*/’Flash’,'Select’,'Textarea’,'Checkbox’,'Radio’,'TextField’,'HiddenField’,
          /*’ImageButton’,*/’Button’,'BulletedList’,'NumberedList’,'TableCell’,'Table’,'Form’];
          這也是改過的把鼠標(biāo)右鍵的“鏈接、圖像,F(xiàn)LASH,圖像按鈕”功能都去掉。
          找到:
          FCKConfig.FontNames = ‘Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’;
          加上幾種我們常用的字體
          FCKConfig.FontNames = ‘宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’;
          添加文件 /TestFCKeditor/test.jsp:
          ----------------------------------------
          <%@ page language=”java” import=”com.fredck.FCKeditor.*” %>
          <%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %>
          <script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script>
          <%–
          三種方法調(diào)用FCKeditor
          1.FCKeditor自定義標(biāo)簽 (必須加頭文件 <%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %> )
          2.script腳本語言調(diào)用 (必須引用 腳本文件 <script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script> )
          3.FCKeditor API 調(diào)用 (必須加頭文件 <%@ page language=”java” import=”com.fredck.FCKeditor.*” %> )
          –%>
          <%–
          <form. action=”show.jsp” method=”post” target=”_blank”>
          <FCK:editor id=”content” basePath=”/TestFCKeditor/FCKeditor/”
          width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”
          toolbarSet = “Default”>
          內(nèi)容
          </FCK:editor>
          <input type=”submit” value=”Submit”>
          </form>
          –%>
          <form. action=”show.jsp” method=”post” target=”_blank”>
          <table border=”0″ width=”700″>
          <tr>
          <td>
          <textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”>input</textarea>
          <script. type=”text/javascript”>
          var FCKeditor = new FCKeditor(’content? ;
          oFCKeditor.BasePath = “/TestFCKeditor/FCKeditor/” ;
          oFCKeditor.Height = 400;
          oFCKeditor.ToolbarSet = “Default” ;
          oFCKeditor.ReplaceTextarea();
          </script>
          <input type=”submit” value=”Submit”>
          </td>
          </tr>
          </table>
          </form>
          <%–
          <form. action=”show.jsp” method=”post” target=”_blank”>
          <%
          FCKeditor oFCKeditor ;
          oFCKeditor = new FCKeditor( request, “content” ) ;
          oFCKeditor.setBasePath( “/TestFCKeditor/FCKeditor/” ) ;
          oFCKeditor.setValue( “input” );
          out.println( oFCKeditor.create() ) ;
          %>
          <br>
          <input type=”submit” value=”Submit”>
          </form>
          –%>
          添加文件/TestFCKeditor/show.jsp:
          <%
          String content = request.getParameter(”content”);
          out.print(content);
          %>
          ====================================
          1、適時(shí)打開編輯器
          ------------------------------------
          很多時(shí)候,我們?cè)诖蜷_頁(yè)面的時(shí)候不需要直接打開編輯器,而在用到的時(shí)候才打開,這樣一來有很好的用戶體驗(yàn),另一方面可以消除FCK在加載時(shí)對(duì)頁(yè)面打開速度的影響,點(diǎn)擊“Open Editor”按鈕后才打開編輯器界面。
          實(shí)現(xiàn)原理:
          使用JAVASCRIPT版的FCK,在頁(yè)面加載時(shí)(未打開FCK),創(chuàng)建一個(gè)隱藏的TextArea域,這個(gè)TextArea
          的name和ID要和創(chuàng)建的FCK實(shí)例名稱一致,然后點(diǎn)擊”Open Editor”按鈕時(shí),通過調(diào)用一段函數(shù),使用
          FCK的ReplaceTextarea()方法來創(chuàng)建FCKeditor,代碼如下:
          ------------------------------------
          <script. type=”text/javascript”>
          <!–
          function showFCK(){
          var FCKeditor = new FCKeditor( ‘fbContent’ ) ;
          oFCKeditor.BasePath = ‘/FCKeditor/’ ;
          oFCKeditor.ToolbarSet = ‘Basic’ ;
          oFCKeditor.Width = ‘100%’ ;
          oFCKeditor.Height = ‘200′ ;
          oFCKeditor.ReplaceTextarea() ;
          }
          //–>
          </script>
          <textarea name=”fbContent” id=”fbContent”></textarea>
          2、使用FCKeditor 的 API
          -------------------------------------
          FCKeditor編輯器,提供了非常豐富的API,用于給End User實(shí)現(xiàn)很多想要定制的功能,比如最基本的數(shù)據(jù)驗(yàn)證,如何在提交的時(shí)候用JS判斷當(dāng)前編輯器區(qū)域內(nèi)是否有內(nèi)容,F(xiàn)CK的API提供了GetLength()方法;
          再比如如何通過腳本向FCK里插入內(nèi)容,使用InsertHTML()等;
          還有,在用戶定制功能時(shí),中間步驟可能要執(zhí)行FCK的一些內(nèi)嵌操作,那就用ExecuteCommand()方法。
          詳細(xì)的API列表,請(qǐng)查看FCKeditor的Wiki。而常用的API,請(qǐng)查看FCK壓縮包里的_samples/html/sample08.html。此處就不貼代碼了。
          3、外聯(lián)編輯條(多個(gè)編輯域共用一個(gè)編輯條)
          --------------------------------------
          這個(gè)功能是2.3版本才開始提供的,以前版本的FCKeditor要在同一個(gè)頁(yè)面里用多個(gè)編輯器的話,得一個(gè)個(gè)創(chuàng)建,現(xiàn)在有了這個(gè)外聯(lián)功能,就不用那么麻煩了,只需要把工具條放在一個(gè)適當(dāng)?shù)奈恢茫竺婢涂梢詿o限制的創(chuàng)建編輯域了。
          要實(shí)現(xiàn)這種功能呢,需要先在頁(yè)面中定義一個(gè)工具條的容器:<div id=”xToolbar”></div>,然后再根據(jù)這個(gè)容器的id屬性進(jìn)行設(shè)置。
          JAVASCRIPT實(shí)現(xiàn)代碼:
          --------------------------------------
          <div id=”xToolbar”></div>
          FCKeditor 1:
          <script. type=”text/javascript”>
          <!–
          // Automatically calculates the editor base path based on the _samples directory.
          // This is usefull only for these samples. A real application should use something like this:
          // oFCKeditor.BasePath = ‘/fckeditor/’; // ‘/fckeditor/’ is the default value.
          var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf(’_samples’));
          var FCKeditor = new FCKeditor( ‘FCKeditor_1′ );
          oFCKeditor.BasePath = sBasePath;
          oFCKeditor.Height = 100;
          oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
          oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
          oFCKeditor.Create();
          //–>
          </script>
          <br />
          FCKeditor 2:
          <script. type=”text/javascript”>
          <!–
          FCKeditor = new FCKeditor( ‘FCKeditor_2′ );
          oFCKeditor.BasePath = sBasePath;
          oFCKeditor.Height = 100;
          oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
          oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
          oFCKeditor.Create();
          //–>
          </script>
          -------------------------------------
          此部分的詳細(xì)DEMO請(qǐng)參照_samples/html/sample11.html,_samples/html/sample11_frame.html
          4、文件管理功能、文件上傳的權(quán)限問題
          -------------------------------------
          一直以來FCKeditor的文件管理部分的安全是個(gè)值得注意,但很多人沒注意到的地方,雖然FCKeditor在各個(gè)Release版本中一直存在的一個(gè)功能就是對(duì)上傳文件類型進(jìn)行過濾,但是她沒考慮過另一個(gè)問題:到底允許誰能上傳?到底誰能瀏覽服務(wù)器文件?
          之前剛開始用FCKeditor時(shí),我就出現(xiàn)過這個(gè)問題,還好NetRube(FCKeditor中文化以及FCKeditor ASP版上傳程序的作者)及時(shí)提醒了我,做法是去修改FCK上傳程序,在里面進(jìn)行權(quán)限判斷,并且再在fckconfig.js里把相應(yīng)的一些功能去掉。但隨之FCK版本的不斷升級(jí),每升一次都要去改一次配置程序fckconfig.js,我發(fā)覺厭煩了,就沒什么辦法能更好的控制這種配置么?事實(shí)上,是有的。
          在fckconfig.js里面,有關(guān)于是否打開上傳和瀏覽服務(wù)器的設(shè)置,在創(chuàng)建FCKeditor時(shí),通過程序來判斷是否創(chuàng)建有上傳瀏覽功能的編輯器。首先,我先在fckconfig.js里面把所有的上傳和瀏覽設(shè)置全設(shè)為false,接著我使用的代碼如下:
          JAVASCRIPT版本:
          -------------------------------------
          <script. type=”text/javascript”>
          var FCKeditor = new FCKeditor( ‘fbContent’ );
          <% if power = powercode then %>
          oFCKeditor.Config[’LinkBrowser’] = true;
          oFCKeditor.Config[’ImageBrowser’] = true;
          oFCKeditor.Config[’FlashBrowser’] = true;
          oFCKeditor.Config[’LinkUpload’] = true;
          oFCKeditor.Config[’ImageUpload’] = true;
          oFCKeditor.Config[’FlashUpload’] = true;
          <% end if %>
          oFCKeditor.ToolbarSet = ‘Basic’;
          oFCKeditor.Width = ‘100%’;
          oFCKeditor.Height = ‘200′;
          oFCKeditor.Value = ‘’;
          oFCKeditor.Create();
          </script>
          -------------------------------------
          在按鈕旁邊加文字
          -------------------------------------
          打開 editor/js/ 兩個(gè)js文件
          fckeditorcode_gecko.js
          fckeditorcode_ie.js
          第一個(gè)是支持非ie瀏覽器的
          第二個(gè)文件是支持ie瀏覽器的
          搜索 FCKToolbarButton,可以看到許多類似這樣的語句:
          case ‘Save’:B = new FCKToolbarButton(’Save’, FCKLang.Save, null, null, true, null, 3); break;
          ‘Save’是按鈕英文名字
          FCKToolbarButton 的四個(gè)參數(shù)分別是:
          按鈕命令名稱,按鈕標(biāo)簽文字,按鈕工具提示,按鈕樣式,按鈕是否在源代碼模式可見,按鈕下拉菜單其中將第4項(xiàng)參數(shù)設(shè)置為 FCK_TOOLBARITEM_ICONTEXT 即可使按鈕旁邊出現(xiàn)文字,注意沒有引號(hào)。
          例如:
          case ‘Preview’:B = new FCKToolbarButton(’Preview’, FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
          這樣我們就可以將 我們經(jīng)常用的3種模式源代碼、預(yù)覽、全屏編輯按鈕都加上文字了。
          解釋fck樣式的工作原理
          -------------------------------------
          fck的樣式設(shè)置涉及到了兩個(gè)文件,一個(gè)是你定義好的樣式表文件.css,另一個(gè)是告訴fck樣式表如何使用的xml文件,兩個(gè)文件確一不可。
          css文件的位置是不做要求的,但是需要你在應(yīng)用的編輯器的頁(yè)面上插入樣式表文件的鏈接。這樣才能顯示出來樣式。
          fckstyles.xml 在與editor目錄同級(jí)的目錄下。該文件定義了那些樣式可以使用在那些標(biāo)簽里面。
          這就是fck自帶的樣式xml定義:
          <?xml version=”1.0″ encoding=”utf-8″ ?>
          <Styles>
          <Style name=”Image on Left” element=”img”>
          <Attribute name=”style” value=”padding: 5px; margin-right: 5px” />
          <Attribute name=”border” value=”2″ />
          <Attribute name=”align” value=”left” />
          </Style>
          <Style name=”Image on Right” element=”img”>
          <Attribute name=”style” value=”padding: 5px; margin-left: 5px” />
          <Attribute name=”border” value=”2″ />
          <Attribute name=”align” value=”right” />
          </Style>
          <Style name=”Custom Bold” element=”span”>
          <Attribute name=”style” value=”font-weight: bold;” />
          </Style>
          <Style name=”Custom Italic” element=”em” />
          <Style name=”Title” element=”span”>
          <Attribute name=”class” value=”Title” />
          </Style>
          <Style name=”Code” element=”span”>
          <Attribute name=”class” value=”Code” />
          </Style>
          <Style name=”Title H3″ element=”h3″ />
          <Style name=”Custom Ruler” element=”hr”>
          <Attribute name=”size” value=”1″ />
          <Attribute name=”color” value=”#ff0000″ />
          </Style>
          </Styles>
          每一個(gè)<style>將來會(huì)生成一個(gè)樣式的菜單項(xiàng)。name名稱就是顯示在菜單里的文字;element定義了該樣式可以應(yīng)用在那種html標(biāo)簽上,<Attribute>的 name 指定了將會(huì)修改標(biāo)簽的哪個(gè)屬性來應(yīng)用樣式,value則是修改成的值。
          看這個(gè):
          <Style name=”Title” element=”span”>
          <Attribute name=”class” value=”Title” />
          </Style>
          如果你在fck選定了文字 “經(jīng)典論壇 》 前臺(tái)制作與腳本專欄 》 FCKeditor 實(shí)戰(zhàn)技巧 - 1 》 編輯帖子” 應(yīng)用該樣式 則原來文字就會(huì)變成<span class=”Title”>經(jīng)典論壇 》 前臺(tái)制作與腳本專欄 》 FCKeditor 實(shí)戰(zhàn)技巧 - 1 》 編輯帖子</span>
          注意:如果編輯器呈整頁(yè)編輯狀態(tài),那么整頁(yè)里面也需要插入樣式表鏈接才能顯示出來樣式。
          ============================================
          FCKeditor JavaScript. API(翻譯整理)
          原文地址:http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API
          --------------------------------------------
          FCK 編輯器加載后,將會(huì)注冊(cè)一個(gè)全局的 FCKeditorAPI 對(duì)象。
          FCKeditorAPI 對(duì)象在頁(yè)面加載期間是無效的,直到頁(yè)面加載完成。如果需要交互式地知道 FCK 編輯器已經(jīng)加載完成,可使用“FCKeditor_OnComplete”函數(shù)。
          <script. type=”text/javascript”>
          function FCKeditor_OnComplete(editorInstance) {
          FCKeditorAPI.GetInstance(’FCKeditor1′).Commands.GetCommand(’FitWindow’).Execute();
          }
          </script>
          在當(dāng)前頁(yè)獲得 FCK 編輯器實(shí)例:
          var Editor = FCKeditorAPI.GetInstance(’InstanceName’);
          從 FCK 編輯器的彈出窗口中獲得 FCK 編輯器實(shí)例:
          var Editor = window.parent.InnerDialogLoaded().FCK;
          從框架頁(yè)面的子框架中獲得其它子框架的 FCK 編輯器實(shí)例:
          var Editor = window.FrameName.FCKeditorAPI.GetInstance(’InstanceName’);
          從頁(yè)面彈出窗口中獲得父窗口的 FCK 編輯器實(shí)例:
          var Editor = opener.FCKeditorAPI.GetInstance(’InstanceName’);
          獲得 FCK 編輯器的內(nèi)容:
          oEditor.GetXHTML(formatted); // formatted 為:true|false,表示是否按HTML格式取出
          也可用:
          oEditor.GetXHTML();
          設(shè)置 FCK 編輯器的內(nèi)容:
          oEditor.SetHTML(”content”, false); // 第二個(gè)參數(shù)為:true|false,是否以所見即所得方式設(shè)置其內(nèi)容。此方法常用于“設(shè)置初始值”或“表單重置”操作。
          插入內(nèi)容到 FCK 編輯器:
          oEditor.InsertHtml(”html”); // “html”為HTML文本
          檢查 FCK 編輯器內(nèi)容是否發(fā)生變化:
          oEditor.IsDirty();
          在 FCK 編輯器之外調(diào)用 FCK 編輯器工具條命令:
          命令列表如下:
          --------------------------------------------
          DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
          --------------------------------------------
          使用方法如下:
          --------------------------------------------
          oEditor.Commands.GetCommand(’FitWindow’).Execute();
          --------------------------------------------

          posted @ 2008-01-09 12:52 feingto 閱讀(2998) | 評(píng)論 (0)編輯 收藏

          FCKEditor的賦值和取值操作

          1、獲取編輯器中HTML內(nèi)容

          function getEditorHTMLContents(EditorName)

              
          var oEditor = FCKeditorAPI.GetInstance(EditorName); 
              
          return(oEditor.GetXHTML(true)); 
          }


          2、獲取編輯器中文字內(nèi)容(在博客發(fā)布時(shí)獲取無html代碼摘要使用)

          function getEditorTextContents(EditorName)

              
          var oEditor = FCKeditorAPI.GetInstance(EditorName); 
              
          return(oEditor.EditorDocument.body.innerText); 
          }


          3、設(shè)置編輯器中內(nèi)容

          function SetEditorContents(EditorName, ContentStr)

              
          var oEditor = FCKeditorAPI.GetInstance(EditorName) ; 
              oEditor.SetHTML(ContentStr) ; 
          }

          posted @ 2008-01-09 12:51 feingto 閱讀(2086) | 評(píng)論 (1)編輯 收藏

          Script.aculo.us開發(fā)系列(八):使用DropDrag定義拖拽行為

           

          在不同的瀏覽器上默認(rèn)的拖拽能解決的問題相當(dāng)少,所以有很多的框架都能實(shí)現(xiàn)這么個(gè)功能.使用拖拽行為能很好的改善用戶體驗(yàn),尤其是在購(gòu)物的時(shí)候能讓用戶感到很新奇和體面.Script.aculo.us使用了三個(gè)類實(shí)現(xiàn)拖拽和排序,它們是Draggable,Droppable,Sortable.要實(shí)現(xiàn)一個(gè)完整的拖拽行為,需要Draggable,和Droppable的配合使用,由于這連個(gè)類的方法比較多,我只選取比較實(shí)用的幾個(gè)方法進(jìn)行介紹.還是老規(guī)矩,先看看Demo:http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/DragDrop.html

          Draggable

          new Draggable("DraggableId"[,options])

          主要選項(xiàng)

          • snap:推拽的最小單位,默認(rèn)為false,可以是數(shù)組或者函數(shù),將這個(gè)屬性設(shè)置為[50,50],意味著最小的位移單位是50px,50px,如果設(shè)置為一個(gè)函數(shù),這個(gè)函數(shù)的參數(shù)為(x,y),這個(gè)x,y指示當(dāng)前的絕對(duì)坐標(biāo),函數(shù)應(yīng)該返回二維數(shù)組,上面的例子中的Drag(UnAcceptable)推拽到頁(yè)面的左上角是就會(huì)"吸附"上去,就是因?yàn)楹瘮?shù)的作用,詳細(xì)見源碼
          • revert:推拽完畢之后是否回到原來的位置,默認(rèn)為false,也可以是一個(gè)函數(shù),這個(gè)函數(shù)必須返回true/false
          • handle:"提手",移動(dòng)整個(gè)塊的時(shí)候通常不需要在整個(gè)塊的區(qū)域都可以拖拽,比如移動(dòng)一個(gè)欄目,通常只需要拖拽標(biāo)題(比如Google的個(gè)性化主頁(yè)),將該屬性設(shè)置為標(biāo)題的Id
          • ghosting:推拽的過程中是否顯示"影子",默認(rèn)為false
          • constraint:限制能拖動(dòng)的方向,默認(rèn)的兩個(gè)方向都可以,可以設(shè)置為"vertical","horizontal"的任意
          • zindex:"影子"的z-Index屬性
          • scroll:拖拽出視圖范圍是否顯示自動(dòng)滾動(dòng)
          • scrollSensitivity/scrollSpeed:默認(rèn)值分為為20/15,控制滾動(dòng)的敏感度和滾動(dòng)速度
          • delay:拖拽前的延時(shí),開始拖拽后經(jīng)過這個(gè)時(shí)間才"回過神來"

          這里需要說明的是并非所有的標(biāo)簽都支持該行為,詳細(xì)的情況請(qǐng)參閱官方文檔

          API

          • onStart:開始拖拽調(diào)用該函數(shù),接受兩個(gè)參數(shù)(obj,oEvent)前者是$(DraggableId),后者是當(dāng)前事件的event對(duì)象
          • onDrag:在拖拽過程中反復(fù)的調(diào)用該函數(shù),同樣接受兩個(gè)參數(shù)(obj,oEvent)
          • change:在onDrag后調(diào)用,也會(huì)反復(fù)調(diào)用
          • onEnd:拖拽行為結(jié)束調(diào)用,即鼠標(biāo)彈起時(shí)激發(fā)
          • destroy():該方法銷毀元素的拖拽行為

          Droppables

          Droppables(注意是復(fù)數(shù)形式)是一個(gè)抽象類,不能被實(shí)例化,只有一些靜態(tài)方法,常用的方法有add和move,分別增加可放置元素,和去除可放置元素

          add方法:Dropables.add("ContainerId"[,options]),常用的選項(xiàng)

          • accept: 數(shù)組或者字符串,表示該容器接受的元素的className的集合,默認(rèn)的任何元素都接收
          • hoverclass:當(dāng)符合接受要求的元素拖至容器上時(shí),其className
          • onDrop():被拖拽的符合要求的元素在這里放置時(shí)調(diào)用該函數(shù),接受三個(gè)參數(shù)(draggable,droppable,oEvent),draggable是被拖拽元素,droppable是被放置元素,oEvent當(dāng)前事件對(duì)象

          remove("ContainerId"),該方法去除容器的放置行為

          (上面例子的源代碼)

          Sortable

          Sortable是一組可以通過拖拽交換位置的元素,可以先看看實(shí)例(

          serialize(sortable)方法:該方法返回當(dāng)前容器內(nèi)元素的次序,但是要求子元素的id必須以"item_"開頭,且返回格式有講究,看下面的例子

          <div id="horizontalSortable" class="item" style="margin-top:20px; height:40px;">
                <div id="item_5">IE</div>
                <div id="item_6">FireFox</div>
                <div id="item_7">Safari</div>
                <div id="item_8">Opera</div>
          </div>

          Sortable.create("horizontalSortable",
          {
               ghosting:true,
               tag:'div',
               constraint:'horizontal',
               hoverclass:'hoverClass2'
          });

          Sortable.serialize('horizontalSortable')
          //-->horizontalSortable[]=5&horizontalSortable[]=6&horizontalSortable[]=7&horizontalSortable[]=8

          最后看一個(gè)例子,前面提到的containment選項(xiàng)在某些情況下很有用,比如要實(shí)現(xiàn)兩個(gè)容器里的元素可以互相交換子元素,即從一個(gè)容器拖至令一個(gè)容器中.來看下面的例子

          <script type="text/javascript">
            Sortable.create('sortUlLeft',{containment:['sortUlLeft','sortUlRight'], dropOnEmpty:
          true,ghosting:true,constraint:false,hoverclass:'hoverClass'});
            Sortable.create('sortUlRight',{containment:['sortUlLeft','sortUlRight'], dropOnEmpty:
          true,ghosting:true,constraint:false,hoverclass:'hoverClass'});

          </script>

          上面的例子可以實(shí)現(xiàn)sortUlLeft,和sortUlRight的子元素互相交換

          posted @ 2008-01-05 14:14 feingto 閱讀(563) | 評(píng)論 (0)編輯 收藏

          主站蜘蛛池模板: 汪清县| 威信县| 西乌珠穆沁旗| 周口市| 岱山县| 循化| 平安县| 鞍山市| 鄂尔多斯市| 泸定县| 刚察县| 略阳县| 砚山县| 德钦县| 那曲县| 襄城县| 霞浦县| 集安市| 南靖县| 沙田区| 普安县| 丹阳市| 唐山市| 阳朔县| 铅山县| 门源| 会泽县| 德化县| 白朗县| 二连浩特市| 永济市| 菏泽市| 沙田区| 旌德县| 邛崃市| 白银市| 镇沅| 龙井市| 汝南县| 河源市| 襄樊市|