AJAX FCKEditor Rich Editor整合篇第2/2页
更新时间：2008年09月12日 09:40:38 作者：
Rich Editor是我们在Web应用经常使用的一种客户端控件，目前网上开源的、收费的也比较多，在对网上各种富文本编辑器进行了一系列比较之后，我最终选择了FCKEditor
真正更新处理代码如下：
复制代码 代码如下:
FCK.UpdateLinkedField = function () {
FCK.LinkedField.value = FCK.GetXHTML(FCKConfig.FormatOutput); // 将FCKEditor编辑的内容取出来，这里是我们关心的重点
FCK.Events.FireEvent("OnAfterLinkedFieldUpdate");
};
OK，大致过程我们基本上已经了解了，至于FCKEditor是如何在执行onsubmit之前执行绑定的更新处理的，暂且不表。
不过这里对FCKEditor的几个对象类需要了解一下，一个是FCKConfig（保存一些相关的配置信息），FCK（取编辑器中编辑的内容需要用到的）。这些类都存活在编辑器所在的IFrame页面之中，在LinkedField所在的页面是无法访问到的。
下面是我们的使用代码，这里是通过js创建FCKEditor实例的方式。
首先定义一个全局的FCKEditor对象：
复制代码 代码如下:
var oFCKEditor = null;
var oFCKEditor = null;
在页面初始化之后(一般是在body的onload事件中完成)创建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() ;
接下来是在执行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中去
// 收集提交内容，执行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中去
// 收集提交内容，执行ajax请求
....
这个就是我的整合过程，其实还是挺简单的，不过碰到一个问题，就是在打开页面之后，输入焦点总是停留在FCKEditor的编辑区里面，而FCKEditor自己提供的例子里面不会出现这个情况，写法也没有什么区别，不知道问题出在哪里，有知道原因的朋友告知一声。
相关文章
JSP页面中文参数传递在实际的编程中是十分有用的，get和post方法更是十分的常见，那如何掌握好这些方法呢？本文将会向你实现这些方法的具体事宜2013-08-08
用定制标签库和配置文件实现对JSP页面元素的访问控制...2006-10-10
本文将详细介绍jdbc连接数据库步骤以及代码，正在测试数据库连接是否成功的朋友们可以参考下2012-12-12
以IP与Port建立与SQLSERVER的连接...2006-10-10
一、JFreeChart的介绍与获取 JFreeChart开发包是一个开源的Java图形开发包,它从柱形图，饼形图，到雷达图，蜡烛图等等无所不包,可以在c/s,b/s,甚至是实时环境都能一显身手。2008-11-11
session 在struts2中的用法2009-06-06
这篇文章主要介绍了纯jsp实现的倒计时动态显示效果代码,涉及JSP时间操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
AJAX自学练习 无刷新从数据库后台获取数据并显示的代码，大家可以参考下。2009-09-09
开发基于Java的图形用户界面...2006-10-10
关于request.getHeader("Referer")的问题探讨
request.getHeader("Referer")获取上次访问的URL链接，在什么情况下他会出现问题，下面为大家分享下，感兴趣的朋友不要错过2013-10-10
最新评论