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

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

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

    龍行天下

      政 博
    隨筆 - 23, 文章 - 0, 評論 - 12, 引用 - 0
    數據加載中……

    2008年1月3日

    FckEditor中文配置手冊詳細說明

    javascript調用方式:
    ------------------------------------
    <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>
    ------------------------------------
    如果想要使用從數據庫讀來的文本數據或者是后臺來自文件的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/filemanager/browser/default/connectors/下的所有文件刪除
    5.還可以將editor/skins目錄下的皮膚文件刪除,只留下default一套皮膚(如果你不需要換皮膚的話)
    6.還可以將editor/lang目錄下文件刪除,只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件
    7.如果你是使用javascrīpt來調用加載FCKeditor,那么就不需要在web.xml中配置fckeditor的tag文件。
    8.還有一個問題剛開始使用FCKeditor的人常會遇到就怎么控制它的toolbar的大小和元素排列,其實很簡單。
    在fckconfig.js中用這樣的標簽[]來劃分每行的元素的多少,這樣就可以控制toolbar的長短和大小了,具體示例參看:fckconfig.js中的toolbarset[”Default”]
    ====================================
    用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裁剪。
    -------------------------------------
    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沒關系的!
    ======================================
    fckconfig.js總配置文件,可用記錄本打開,修改后將文件存為utf-8 編碼格式。找到:
    --------------------------------------
    FCKConfig.TabSpaces = 0;
    改為:
    FCKConfig.TabSpaces = 1;
    即在編輯器域內可以使用Tab鍵。
    如果你的編輯器還用在網站前臺的話,比如說用于留言本或是日記回復時,那就不得不考慮安全了,
    在前臺千萬不要使用Default的toolbar,要么自定義一下功能,要么就用系統已經定義好的Basic,
    也就是基本的toolbar,找到:
    --------------------------------------
    FCKConfig.ToolbarSets[”Basic”] = [
    [’Bold’,'Italic’,'-’,'OrderedList’,'UnorderedList’,'-’,/*’Link’,*/’Unlink’,'-’,'Style’,'FontSize’,'TextColor’,'BGColor’,'-’,
    ‘Smiley’,'SpecialChar’,'Replace’,'Preview’] ];
    這是改過的Basic,把圖像功能去掉,把添加鏈接功能去掉,因為圖像和鏈接和flash和圖像按鈕添加功能都能讓前臺頁直接訪問和上傳文件, fckeditor還支持編輯域內的鼠標右鍵功能。
    FCKConfig.ContextMenu = [’Generic’,/*’Link’,*/’Anchor’,/*’Image’,*/’Flash’,'Select’,'Textarea’,'Checkbox’,'Radio’,'TextField’,'HiddenField’,
    /*’ImageButton’,*/’Button’,'BulletedList’,'NumberedList’,'TableCell’,'Table’,'Form’];
    這也是改過的把鼠標右鍵的“鏈接、圖像,FLASH,圖像按鈕”功能都去掉。
    找到:
    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>
    <%–
    三種方法調用FCKeditor
    1.FCKeditor自定義標簽 (必須加頭文件 <%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %> )
    2.script腳本語言調用 (必須引用 腳本文件 <script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script> )
    3.FCKeditor API 調用 (必須加頭文件 <%@ 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”>
    內容
    </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、適時打開編輯器
    ------------------------------------
    很多時候,我們在打開頁面的時候不需要直接打開編輯器,而在用到的時候才打開,這樣一來有很好的用戶體驗,另一方面可以消除FCK在加載時對頁面打開速度的影響,點擊“Open Editor”按鈕后才打開編輯器界面。
    實現原理:
    使用JAVASCRIPT版的FCK,在頁面加載時(未打開FCK),創建一個隱藏的TextArea域,這個TextArea
    的name和ID要和創建的FCK實例名稱一致,然后點擊”Open Editor”按鈕時,通過調用一段函數,使用
    FCK的ReplaceTextarea()方法來創建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實現很多想要定制的功能,比如最基本的數據驗證,如何在提交的時候用JS判斷當前編輯器區域內是否有內容,FCK的API提供了GetLength()方法;
    再比如如何通過腳本向FCK里插入內容,使用InsertHTML()等;
    還有,在用戶定制功能時,中間步驟可能要執行FCK的一些內嵌操作,那就用ExecuteCommand()方法。
    詳細的API列表,請查看FCKeditor的Wiki。而常用的API,請查看FCK壓縮包里的_samples/html/sample08.html。此處就不貼代碼了。
    3、外聯編輯條(多個編輯域共用一個編輯條)
    --------------------------------------
    這個功能是2.3版本才開始提供的,以前版本的FCKeditor要在同一個頁面里用多個編輯器的話,得一個個創建,現在有了這個外聯功能,就不用那么麻煩了,只需要把工具條放在一個適當的位置,后面就可以無限制的創建編輯域了。
    要實現這種功能呢,需要先在頁面中定義一個工具條的容器:<div id=”xToolbar”></div>,然后再根據這個容器的id屬性進行設置。
    JAVASCRIPT實現代碼:
    --------------------------------------
    <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>
    -------------------------------------
    此部分的詳細DEMO請參照_samples/html/sample11.html,_samples/html/sample11_frame.html
    4、文件管理功能、文件上傳的權限問題
    -------------------------------------
    一直以來FCKeditor的文件管理部分的安全是個值得注意,但很多人沒注意到的地方,雖然FCKeditor在各個Release版本中一直存在的一個功能就是對上傳文件類型進行過濾,但是她沒考慮過另一個問題:到底允許誰能上傳?到底誰能瀏覽服務器文件?
    之前剛開始用FCKeditor時,我就出現過這個問題,還好NetRube(FCKeditor中文化以及FCKeditor ASP版上傳程序的作者)及時提醒了我,做法是去修改FCK上傳程序,在里面進行權限判斷,并且再在fckconfig.js里把相應的一些功能去掉。但隨之FCK版本的不斷升級,每升一次都要去改一次配置程序fckconfig.js,我發覺厭煩了,就沒什么辦法能更好的控制這種配置么?事實上,是有的。
    在fckconfig.js里面,有關于是否打開上傳和瀏覽服務器的設置,在創建FCKeditor時,通過程序來判斷是否創建有上傳瀏覽功能的編輯器。首先,我先在fckconfig.js里面把所有的上傳和瀏覽設置全設為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/ 兩個js文件
    fckeditorcode_gecko.js
    fckeditorcode_ie.js
    第一個是支持非ie瀏覽器的
    第二個文件是支持ie瀏覽器的
    搜索 FCKToolbarButton,可以看到許多類似這樣的語句:
    case ‘Save’:B = new FCKToolbarButton(’Save’, FCKLang.Save, null, null, true, null, 3); break;
    ‘Save’是按鈕英文名字
    FCKToolbarButton 的四個參數分別是:
    按鈕命令名稱,按鈕標簽文字,按鈕工具提示,按鈕樣式,按鈕是否在源代碼模式可見,按鈕下拉菜單其中將第4項參數設置為 FCK_TOOLBARITEM_ICONTEXT 即可使按鈕旁邊出現文字,注意沒有引號。
    例如:
    case ‘Preview’:B = new FCKToolbarButton(’Preview’, FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
    這樣我們就可以將 我們經常用的3種模式源代碼、預覽、全屏編輯按鈕都加上文字了。
    解釋fck樣式的工作原理
    -------------------------------------
    fck的樣式設置涉及到了兩個文件,一個是你定義好的樣式表文件.css,另一個是告訴fck樣式表如何使用的xml文件,兩個文件確一不可。
    css文件的位置是不做要求的,但是需要你在應用的編輯器的頁面上插入樣式表文件的鏈接。這樣才能顯示出來樣式。
    fckstyles.xml 在與editor目錄同級的目錄下。該文件定義了那些樣式可以使用在那些標簽里面。
    這就是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>
    每一個<style>將來會生成一個樣式的菜單項。name名稱就是顯示在菜單里的文字;element定義了該樣式可以應用在那種html標簽上,<Attribute>的 name 指定了將會修改標簽的哪個屬性來應用樣式,value則是修改成的值。
    看這個:
    <Style name=”Title” element=”span”>
    <Attribute name=”class” value=”Title” />
    </Style>
    如果你在fck選定了文字 “經典論壇 》 前臺制作與腳本專欄 》 FCKeditor 實戰技巧 - 1 》 編輯帖子” 應用該樣式 則原來文字就會變成<span class=”Title”>經典論壇 》 前臺制作與腳本專欄 》 FCKeditor 實戰技巧 - 1 》 編輯帖子</span>
    注意:如果編輯器呈整頁編輯狀態,那么整頁里面也需要插入樣式表鏈接才能顯示出來樣式。
    ============================================
    FCKeditor JavaScript. API(翻譯整理)
    原文地址:http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API
    --------------------------------------------
    FCK 編輯器加載后,將會注冊一個全局的 FCKeditorAPI 對象。
    FCKeditorAPI 對象在頁面加載期間是無效的,直到頁面加載完成。如果需要交互式地知道 FCK 編輯器已經加載完成,可使用“FCKeditor_OnComplete”函數。
    <script. type=”text/javascript”>
    function FCKeditor_OnComplete(editorInstance) {
    FCKeditorAPI.GetInstance(’FCKeditor1′).Commands.GetCommand(’FitWindow’).Execute();
    }
    </script>
    在當前頁獲得 FCK 編輯器實例:
    var Editor = FCKeditorAPI.GetInstance(’InstanceName’);
    從 FCK 編輯器的彈出窗口中獲得 FCK 編輯器實例:
    var Editor = window.parent.InnerDialogLoaded().FCK;
    從框架頁面的子框架中獲得其它子框架的 FCK 編輯器實例:
    var Editor = window.FrameName.FCKeditorAPI.GetInstance(’InstanceName’);
    從頁面彈出窗口中獲得父窗口的 FCK 編輯器實例:
    var Editor = opener.FCKeditorAPI.GetInstance(’InstanceName’);
    獲得 FCK 編輯器的內容:
    oEditor.GetXHTML(formatted); // formatted 為:true|false,表示是否按HTML格式取出
    也可用:
    oEditor.GetXHTML();
    設置 FCK 編輯器的內容:
    oEditor.SetHTML(”content”, false); // 第二個參數為:true|false,是否以所見即所得方式設置其內容。此方法常用于“設置初始值”或“表單重置”操作。
    插入內容到 FCK 編輯器:
    oEditor.InsertHtml(”html”); // “html”為HTML文本
    檢查 FCK 編輯器內容是否發生變化:
    oEditor.IsDirty();
    在 FCK 編輯器之外調用 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 閱讀(2994) | 評論 (0)編輯 收藏

    FCKEditor的賦值和取值操作

    1、獲取編輯器中HTML內容

    function getEditorHTMLContents(EditorName)

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


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

    function getEditorTextContents(EditorName)

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


    3、設置編輯器中內容

    function SetEditorContents(EditorName, ContentStr)

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

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

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

     

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

    Draggable

    new Draggable("DraggableId"[,options])

    主要選項

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

    這里需要說明的是并非所有的標簽都支持該行為,詳細的情況請參閱官方文檔

    API

    • onStart:開始拖拽調用該函數,接受兩個參數(obj,oEvent)前者是$(DraggableId),后者是當前事件的event對象
    • onDrag:在拖拽過程中反復的調用該函數,同樣接受兩個參數(obj,oEvent)
    • change:在onDrag后調用,也會反復調用
    • onEnd:拖拽行為結束調用,即鼠標彈起時激發
    • destroy():該方法銷毀元素的拖拽行為

    Droppables

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

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

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

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

    (上面例子的源代碼)

    Sortable

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

    serialize(sortable)方法:該方法返回當前容器內元素的次序,但是要求子元素的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

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

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

    上面的例子可以實現sortUlLeft,和sortUlRight的子元素互相交換

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

    用script.aculo.us實現像google suggest自動完成功能

     

    實現像google suggest自動完成功能

    首先創建一個jsp

    <%@ page language="java" pageEncoding="UTF-8"%>

    <html>
    <head>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/effects.js"></script>
    <script type="text/javascript" src="js/controls.js"></script>
    <style>
    div.auto_complete {
      width: 350px;
      background: #fff;
    }
    div.auto_complete ul {
      border:1px solid #888;
      margin:0;
      padding:0;
      width:100%;
      list-style-type:none;
    }
    div.auto_complete ul li {
      margin:0;
      padding:3px;
    }
    div.auto_complete ul li.selected {
      background-color: #ffb;
    }
    div.auto_complete ul strong.highlight {
      color: #800;
      margin:0;
      padding:0;
    }
    </style>

    </head>
    <body>
    <input type="text" id="autocomplete"/>
    <div id="results" class="auto_complete"></div>
    <script type="text/javascript">
     new Ajax.Autocompleter(
      "autocomplete",
      "results",
      "list.html", {
       method: "GET"
      }
     );
    </script>
    </body>
    </html>

     

    list.html

    <ul>
    <li>Aria</li>
    <li>Aaaa</li>
    <li>Afdsa</li>
    <li>bsa</li>
    </ul>

    上面list.html采用靜態頁面返回列表,讀者可以使用動態頁面返回結果。

    posted @ 2008-01-03 09:20 feingto 閱讀(1957) | 評論 (3)編輯 收藏

    怎么避免瀏覽器緩存靜態文件

    對于動態文件,比如 index.asp?id=...  或者 index.aspx?id=... 相信有經驗的程序員都知道怎樣禁止瀏覽器緩存數據了.
    但是對于靜態文件(css,jpg,gif等等), 在什么場合下面我們需要禁止瀏覽器緩存他們,怎么做?

    本文討論的主題是如何防緩存, 尤其是如何防止靜態文件被緩存..


    在  RE:對博客園URL的一些調整建議, 二級域名不利于客戶端瀏覽器緩存 一文中,我提到了怎么最大化的
    利用瀏覽器緩存功能,來提高客戶端瀏覽速度, 減輕服務器負擔的.

    但是事物總是一分為二的,并不是所有的場合都要使用緩存的. 有時候我們的數據被緩存了反而會給我們帶來麻煩.

    對于動態數據(從數據庫讀取生成的那些),我們可以通過以下方法來禁止瀏覽器緩存。

    'asp 為例 禁止緩存

    Response.Buffer 
    = True 
    Response.ExpiresAbsolute 
    = Now() - 1 
    Response.Expires 
    = 0 
    Response.CacheControl 
    = "no-cache" 
    Response.AddHeader 
    "Pragma""No-Cache" 

    對于Ajax 的請求(不管是靜態數據還是動態數據):

    //以下三種方法使用其中任何一種方法都可以
    xmlhttp.setRequestHeader("Cache-Control","no-cache");  
    //或者
    xmlhttp.setRequestHeader("If-Modified-Since","0");
    //或者
    xmlhttp.Open(url+'?rnd='+Math.random(),....)

    如果使用 prototype.js  , 用類似這樣的代碼 
    new Ajax.Request(url,{method:"get",requestHeaders:["Cache-Control","no-cache"]})
    或者
    new Ajax.Request(url,{method:"get",requestHeaders:["If-Modified-Since","0"]})
     

    什么情況下,要禁止靜態文件緩存:
    1、經常可能要改動的 js, css.
           比如 一個html 文件, test.html 在 1.0版本中。可能是這樣
         <script src="common.js"></script>
         修改后  v1.1版本:
     <script src="common.js"></script>
     <script src="foo.js"></script>
       新增加了一個foo.js  同時,也改動了common.js , 在common.js 中定義了新的類,并在foo.js 中使用了common.js. 

    在這種情況下如果以前用戶瀏覽過 1.0版本的 html 文件,那么他的瀏覽器自動緩存了 common.js
    當他瀏覽新版本的時候,因為使用的是 v1.1的 foo.js 和 v1.0的 common.js ,這樣將導致腳本出錯。


    解決方法探討:
      因為css,js 是通過 <script src=....> 這種方式加載的,所以,很難使用 asp 的那種服務器端禁止緩存的辦法。也很難使用ajax的通過設置 http請求頭的辦法禁止使用緩存。

    看來隨機數是個好辦法。

    //方法一:
    document.write("<script src='test.js?rnd="+Math.random()+"'></s"+"cript>")

    //方法二:
    var js=document.createElement("script")
    js.src
    ="test.js"+Math.random()
    document.body.appendChild(js)


    但是,如果采用隨機數的話, js文件將永遠得不到緩存,每次都必須重新從服務器加載,即使沒有任何更改。
    大家如果經常上國外網站的話,可以看到他們通常采用這樣的方式來解決:
    <script src="test.js?ver=113"></script>
    其中 ver=113 的 113就是版本號,一般都是采用 CVS 或其他工具生成的開發版本號。

    這樣真正做到了應該緩存的時候緩存靜態文件,當版本有更新的時候從獲取最新的版本,并更新緩存。
    對于圖像 <img src="test.jps?ver=在CVS的版本號"> 來有效利用和更新緩存.


    唉,現在在CSDN的Web版,不知道有多少人在重復問著同一個問題。“怎么通過程序刪除清空客戶端的瀏覽器緩存”.........

     

    未完待續:

    下一篇:  利用瀏覽器緩存來改善用戶體驗。。。。Ajax模式之預先加載

    敬請關注,等我寫完再加上鏈接

    posted @ 2008-01-03 09:19 feingto 閱讀(2566) | 評論 (1)編輯 收藏

    主站蜘蛛池模板: 91亚洲自偷在线观看国产馆| 亚洲成片观看四虎永久| 18禁男女爽爽爽午夜网站免费| 久久成人18免费网站| 一级人做人爰a全过程免费视频| 免费夜色污私人影院网站| 香蕉97碰碰视频免费| 特级毛片A级毛片免费播放| 色天使色婷婷在线影院亚洲| 国产综合激情在线亚洲第一页| 在线精品自拍亚洲第一区| 小说区亚洲自拍另类| 成人午夜免费视频| 日批视频网址免费观看| 日本免费电影一区二区| 99re6免费视频| a毛片基地免费全部视频| 午夜男人一级毛片免费| 国产大片线上免费看| 亚洲成av人片在线观看天堂无码 | 一个人看的在线免费视频| a级毛片免费网站| 在线涩涩免费观看国产精品 | 亚洲日韩av无码中文| 在线观看亚洲视频| 久久九九久精品国产免费直播| 日本免费污片中国特一级| 国内精品乱码卡1卡2卡3免费| 天天摸天天碰成人免费视频| 亚洲AV无码乱码精品国产| 亚洲理论电影在线观看| 亚洲精品456在线播放| 亚洲精品无码久久久久秋霞| 一个人看的免费观看日本视频www 一个人看的免费视频www在线高清动漫 | 日韩视频免费在线| 亚洲中文字幕成人在线| 亚洲国产精品婷婷久久| 亚洲日本VA中文字幕久久道具| 一级成人毛片免费观看| 久久精品毛片免费观看| 国产美女精品视频免费观看|