AJAX FCKEditor Rich Editor整合篇

2016-02-19 11:40 8 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享AJAX FCKEditor Rich Editor整合篇吧。

【 tulaoshi.com - Web开发 】

(http://www.fckeditor.net, JavaEye的编辑器也是采用的FCKEditor,XX所见略同?呵呵),它OpenSource(免费啊,可以直接改源代码啊,呵呵),功能强大(几乎就是一个office word的web版),提供了对各种服务器端的支持(虽然它完全是一个纯客户端的东东, 但是目前提供了与.NET, PHP, Java, Coldfusion, Perl, Lasso, Python各种服务器端脚本的紧密集成),支持国际化(汉化做的非常棒),可更换皮肤(office 2000的风格简直可以乱真),内嵌文件上传(Java版本支持这个),保持一定的更新状态(目前版本为2.3.2),如此等等。当然它还有N多功能,不过我还没仔细去研究,如果有哪位用到的,可以告知一二。

至于FCKEditor的各种用法我就不在这里一一列举,网上有很多相关的文章,它也自带了不错的sample,可以非常容易加入到我们自己的项目中去。

不过在Ajax应用中如何使用FCKEditor控件呢?这个FCKEditor好像没有提供相应的答案,因为Ajax都是采用的无刷新提交,而FCKEditor只能在Form提交方式下使用,为什么这样说呢,那我们还得从FCKEditor的执行流程说起。

FCKEditor的编辑器实际上是一个IFrame,每次在创建一个FCKEditor实体的时候,都会新建一个IFrame,然后各种toolbar和编辑区都塞到这个IFrame中去了,在IFrame外面必须有一个对应的input元素(这个一般是一个textarea,FCKEditor中称之为LinkedField),这样就可以将textarea中的已有的内容导入到编辑器中,或者将编辑好的内容更新到LinkedField中。那FCKEditor中的内容是何时保存到对应的LinkedField中去的呢?开始我没有看源码,以为是在FCKEditor中的内容发生改变的时候同时更新LinkedField的,后来发现不是,如果是这样的话,那我们就可以很容易在ajax中使用FCKEditor了。那到底是什么时候做到与LinkedField同步的呢?答案肯定是在form执行submit事件之前,要在submit之前做到更新唯一的方式就是通过attachEvent方式将更新的回调函数绑定到onsubmit事件上,然后通过一定的方式在submit之前调用绑定的函数。因此就在FCKEditor提供的核心js文件中查找onsubmit,后来在fckeditorcode_ie.js文件找到了onsubmit关键字(这里不得不提到的一点,FCKEditor虽然做到了开源,但是对于他们的javascript源代码还是有所保留的,里面的很多核心js文件都进行了混淆重排,不过这个也不能怪人家不厚道,为了方便查看源代码,吐血推荐采用MyEclipse的document format功能进行格式化处理,这样基本上可以对里面的结构一目了然了)。

相关代码如下,首先是在FCKEditor初始化的时候:
代码如下:

function FCK_EditingArea_OnLoad() {
FCK.EditorWindow = FCK.EditingArea.Window;
FCK.EditorDocument = FCK.EditingArea.Document;
FCK.InitializeBehaviors();
FCK.OnAfterSetHTML();
if (FCK.Status != FCK_STATUS_NOTLOADED) {
return;
}
FCK.ResetIsDirty();
FCKTools.AttachToLinkedFieldFormSubmit(FCK.UpdateLinkedField); // 开始做绑定
FCK.SetStatus(FCK_STATUS_ACTIVE);
}

然后是submit提交前的处理:
代码如下:

FCKTools.AttachToLinkedFieldFormSubmit = function (A) {
var B = FCK.LinkedField.form;
if (!B) {
return;
}
if (FCKBrowserInfo.IsIE) {
B.attachEvent("onsubmit", A); // 将更新处理绑定到form的onsubmit事件上
} else {
B.addEventListener("submit", A, false);
}
if (!B.updateFCKeditor) {
B.updateFCKeditor = new Array();
}
B.updateFCKeditor[B.updateFCKeditor.length] = A;
if (!B.originalSubmit && (typeof (B.submit) == "function" || (!B.submit.tagName && !B.submit.length))) {
B.originalSubmit = B.submit;
B.submit = FCKTools_SubmitReplacer;
}
};


真正更新处理代码如下:
代码如下:

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自己提供的例子里面不会出现这个情况,写法也没有什么区别,不知道问题出在哪里,有知道原因的朋友告知一声。

来源:https://www.tulaoshi.com/n/20160219/1598170.html

延伸阅读
标签: PHP
  [ZT]老技术新外衣 如何设计一个包含 javascript :;" onClick="javascript:tagshow(event, 'Ajax');" target="_self"> Ajax 技术的 PHP 网页 掌握 Ajax,第 1 部分: Ajax 简介[转帖] 掌握 Ajax,第 2 部分: 使用 javascript 和 Ajax 发出异步请求[转帖] AJAX实例 学习 手记 AJAX学习实例(二) 无刷新上传 [技术交流]...
标签: PHP
首先介绍如何用javascript创建fckeditor //-------------------------------------------------------------------------------------------------- 第一在头部有个引用: CODE:<script type="text/javascript" src="http://img.jcwcn.com/attachment/portal"#0000ff">加入创建代码(创建的代码有多种形式) 第...
标签: Web开发
好了,还是和以前一样,先建一个Login.html页面吧,用于填写登录信息,然后再建一个DealData.aspx页面吧(当然,这里用一般处理程序是最好的了:*.ashx),用来处理数据用的。 在login.html页面中其代码如下: 代码如下: head title无刷新登录/title script src="Scripts/jquery-1.4.1.js" type="text/javascript"/script script type...
标签: Web开发
是的,今天我们要实现的效果是.在不刷新网页的情况下读取并显示服务端的数据. 拿出来我们上次准备好的东西. 1:XMLHTTPRequest对象的函数. 2:Asp输出xml格式的文件.你可以点击查看该文件内容 代码如下: % '出自:http://Www.Web666.Net '作者:康董 '如需转载请务必保留以上信息 '定义一个变量,来保存xml数据 dim xml xml...
标签: Web开发
在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的,唉,童鞋.......看到那些代码是不是有点头疼啊!呵呵......不仅是你,我都有点反感了,不仅要判断浏览器,还要......反正就是有一大坨代码,看起来毫不爽,现在,让我们忘记拿一大坨吧(记住:这里不是真的忘记哦!好像许多公司面试Ajax这块内容时,都会让你不...

经验教程

700

收藏

27
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部