AJAX FCKEditor Rich Editor整合篇
更新時間：2008年09月12日 09:40:38 作者：
Rich Editor是我們在Web應用經(jīng)常使用的一種客戶端控件，目前網(wǎng)上開源的、收費的也比較多，在對網(wǎng)上各種富文本編輯器進行了一系列比較之后，我最終選擇了FCKEditor
真正更新處理代碼如下：
復制代碼 代碼如下:
FCK.UpdateLinkedField = function () {
FCK.LinkedField.value = FCK.GetXHTML(FCKConfig.FormatOutput); // 將FCKEditor編輯的內容取出來，這里是我們關心的重點
FCK.Events.FireEvent("OnAfterLinkedFieldUpdate");
};
OK，大致過程我們基本上已經(jīng)了解了，至于FCKEditor是如何在執(zhí)行onsubmit之前執(zhí)行綁定的更新處理的，暫且不表。
不過這里對FCKEditor的幾個對象類需要了解一下，一個是FCKConfig（保存一些相關的配置信息），F(xiàn)CK（取編輯器中編輯的內容需要用到的）。這些類都存活在編輯器所在的IFrame頁面之中，在LinkedField所在的頁面是無法訪問到的。
下面是我們的使用代碼，這里是通過js創(chuàng)建FCKEditor實例的方式。
首先定義一個全局的FCKEditor對象：
復制代碼 代碼如下:
var oFCKEditor = null;
var oFCKEditor = null;
在頁面初始化之后(一般是在body的onload事件中完成)創(chuàng)建oFCKEditor對象
復制代碼 代碼如下:
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() ;
接下來是在執(zhí)行ajax請求提交前的處理：
復制代碼 代碼如下:
var inputElementId = "frmEntity_editor_content"; // LinkedField元素id
var frameElement = eval(inputElementId + "___Frame"); // 用來嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
inputElement.value = frameElement.window.FCK.GetXHTML(frameElement.window.FCKConfig.FormatOutput); // 取得FCKEditor中的內容同步到LinkedField中去
// 收集提交內容，執(zhí)行ajax請求
....
var inputElementId = "frmEntity_editor_content"; // LinkedField元素id
var frameElement = eval(inputElementId + "___Frame"); // 用來嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
inputElement.value = frameElement.window.FCK.GetXHTML(frameElement.window.FCKConfig.FormatOutput); // 取得FCKEditor中的內容同步到LinkedField中去
// 收集提交內容，執(zhí)行ajax請求
....
這個就是我的整合過程，其實還是挺簡單的，不過碰到一個問題，就是在打開頁面之后，輸入焦點總是停留在FCKEditor的編輯區(qū)里面，而FCKEditor自己提供的例子里面不會出現(xiàn)這個情況，寫法也沒有什么區(qū)別，不知道問題出在哪里，有知道原因的朋友告知一聲。
相關文章
JSP頁面中文參數(shù)的傳遞(get和post方法分析)
JSP頁面中文參數(shù)傳遞在實際的編程中是十分有用的，get和post方法更是十分的常見，那如何掌握好這些方法呢？本文將會向你實現(xiàn)這些方法的具體事宜2013-08-08
用定制標簽庫和配置文件實現(xiàn)對JSP頁面元素的訪問控制
用定制標簽庫和配置文件實現(xiàn)對JSP頁面元素的訪問控制...2006-10-10
本文將詳細介紹jdbc連接數(shù)據(jù)庫步驟以及代碼，正在測試數(shù)據(jù)庫連接是否成功的朋友們可以參考下2012-12-12
以IP與Port建立與SQLSERVER的連接...2006-10-10
一、JFreeChart的介紹與獲取 JFreeChart開發(fā)包是一個開源的Java圖形開發(fā)包,它從柱形圖，餅形圖，到雷達圖，蠟燭圖等等無所不包,可以在c/s,b/s,甚至是實時環(huán)境都能一顯身手。2008-11-11
session 在struts2中的用法2009-06-06
純jsp實現(xiàn)的倒計時動態(tài)顯示效果完整代碼
這篇文章主要介紹了純jsp實現(xiàn)的倒計時動態(tài)顯示效果代碼,涉及JSP時間操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
AJAX自學練習 無刷新從數(shù)據(jù)庫后臺取數(shù)據(jù)顯示
AJAX自學練習 無刷新從數(shù)據(jù)庫后臺獲取數(shù)據(jù)并顯示的代碼，大家可以參考下。2009-09-09
開發(fā)基于Java的圖形用戶界面...2006-10-10
關于request.getHeader("Referer")的問題探討
request.getHeader("Referer")獲取上次訪問的URL鏈接，在什么情況下他會出現(xiàn)問題，下面為大家分享下，感興趣的朋友不要錯過2013-10-10