快捷導(dǎo)航

AJAX FCKEditor Rich Editor整合篇第2/2頁(yè)

更新時(shí)間：2008年09月12日 09:40:38 作者：

Rich Editor是我們?cè)赪eb應(yīng)用經(jīng)常使用的一種客戶(hù)端控件，目前網(wǎng)上開(kāi)源的、收費(fèi)的也比較多，在對(duì)網(wǎng)上各種富文本編輯器進(jìn)行了一系列比較之后，我最終選擇了FCKEditor

真正更新處理代碼如下：

復(fù)制代碼代碼如下:

FCK.UpdateLinkedField = function () { 
FCK.LinkedField.value = FCK.GetXHTML(FCKConfig.FormatOutput); // 將FCKEditor編輯的內(nèi)容取出來(lái)，這里是我們關(guān)心的重點(diǎn) 
FCK.Events.FireEvent("OnAfterLinkedFieldUpdate"); 
}; 

OK，大致過(guò)程我們基本上已經(jīng)了解了，至于FCKEditor是如何在執(zhí)行onsubmit之前執(zhí)行綁定的更新處理的，暫且不表。

不過(guò)這里對(duì)FCKEditor的幾個(gè)對(duì)象類(lèi)需要了解一下，一個(gè)是FCKConfig（保存一些相關(guān)的配置信息），F(xiàn)CK（取編輯器中編輯的內(nèi)容需要用到的）。這些類(lèi)都存活在編輯器所在的IFrame頁(yè)面之中，在LinkedField所在的頁(yè)面是無(wú)法訪問(wèn)到的。

下面是我們的使用代碼，這里是通過(guò)js創(chuàng)建FCKEditor實(shí)例的方式。
首先定義一個(gè)全局的FCKEditor對(duì)象：

復(fù)制代碼代碼如下:

var oFCKEditor = null; 
var oFCKEditor = null; 

在頁(yè)面初始化之后(一般是在body的onload事件中完成)創(chuàng)建oFCKEditor對(duì)象

復(fù)制代碼代碼如下:

oFCKeditor = new FCKeditor( 'frmEntity_editor_content'/*LinkedField元素id*/, '100%;','400px', 'Default') ; 
oFCKeditor.BasePath = "${request.getContextPath()}/editor/" ; 
oFCKeditor.ReplaceTextarea() ; 

oFCKeditor = new FCKeditor( 'frmEntity_editor_content'/*LinkedField元素id*/, '100%;','400px', 'Default') ; 
oFCKeditor.BasePath = "${request.getContextPath()}/editor/" ; 
oFCKeditor.ReplaceTextarea() ; 

接下來(lái)是在執(zhí)行ajax請(qǐng)求提交前的處理：

復(fù)制代碼代碼如下:

var inputElementId = "frmEntity_editor_content"; // LinkedField元素id 
var frameElement = eval(inputElementId + "___Frame"); // 用來(lái)嵌入FCKEditor的IFrame的id 
var inputElement = eval(inputElementId); 
inputElement.value = frameElement.window.FCK.GetXHTML(frameElement.window.FCKConfig.FormatOutput); // 取得FCKEditor中的內(nèi)容同步到LinkedField中去 
// 收集提交內(nèi)容，執(zhí)行ajax請(qǐng)求 
.... 

var inputElementId = "frmEntity_editor_content"; // LinkedField元素id 
var frameElement = eval(inputElementId + "___Frame"); // 用來(lái)嵌入FCKEditor的IFrame的id 
var inputElement = eval(inputElementId); 
inputElement.value = frameElement.window.FCK.GetXHTML(frameElement.window.FCKConfig.FormatOutput); // 取得FCKEditor中的內(nèi)容同步到LinkedField中去 
// 收集提交內(nèi)容，執(zhí)行ajax請(qǐng)求 
.... 

這個(gè)就是我的整合過(guò)程，其實(shí)還是挺簡(jiǎn)單的，不過(guò)碰到一個(gè)問(wèn)題，就是在打開(kāi)頁(yè)面之后，輸入焦點(diǎn)總是停留在FCKEditor的編輯區(qū)里面，而FCKEditor自己提供的例子里面不會(huì)出現(xiàn)這個(gè)情況，寫(xiě)法也沒(méi)有什么區(qū)別，不知道問(wèn)題出在哪里，有知道原因的朋友告知一聲。

上一頁(yè)12閱讀全文