当AjaxForm遇上TinyMCE

在没有使用AjaxForm前,我做的一个小小的评论提交的Web form,评论内容使用了TinyMCE做文本编辑。为了增加一点点的用户体验,就顺手拿AjaxForm来实现Ajax提交。可是发现出现了一个意外的事情。就是每次提交,第一次提交时,AjaxForm会无法获得当前编辑的评论内容,即TextArea里面的内容,要再点击一次提交,才能将TextArea的内容提交上去。

关键是TinyMCE上的内容没有在提交前更新到TextArea中。于是想看看AjaxForm是否有在提交前的事件绑定,发现在beforeSubmit事件中,formData的内容已经被填充,虽然可以在此处自行将当前的TinyMCE的内容填充上去(详细可查看这里),可是总觉得是不太漂亮的解决方案。

为了找是否有其它途径解决此问题,我查看了一下AjaxForm的源代码,发现原来AjaxForm作者已经为这问题提出了统一的解决方案,具体源代码如下:

    // hook for manipulating the form data before it is extracted;
    // convenient for use with rich editors like tinyMCE or FCKEditor
    var veto = {};
    this.trigger('form-pre-serialize', [this, options, veto]);
    if (veto.veto) {
        log('ajaxSubmit: submit vetoed via form-pre-serialize trigger');
        return this;
   }

果然,真的有对应的事件让我们可以在formData被序列号前将TinyMCE的数据更新到TextArea中。只要我们绑定form的form-pre-serialize事件即可。

于是一个我的代码就这样出来了:(对应FCKEditor类似)

    // bind form using 'ajaxForm' 
    $('#commentForm').ajaxForm(options);
    // 绑定form-pre-serialize事件,在触发form-serilaize事件前保存tinyMCE的数据到textarea中
    $('#commentForm').bind('form-pre-serialize', function(event, form, options, veto) {
	tinyMCE.triggerSave();
    });
 
^_^ 希望对你有用...

Technorati: , , ,

 
posted @ 2008-06-08 20:38 MK2 阅读(576) 评论(4)  编辑 收藏 网摘 所属分类: AjaxJavaScript4 JavaScript 的世界3 Ajax In other way

  回复  引用  查看    
#1楼2008-06-10 21:10 | Q.Lee.lulu      
好东东....
以后肯定能用上

  回复  引用    
#2楼2008-06-16 14:17 | 那多[未注册用户]
没有用过TinyMCE,查相信以后可以用着....先收藏了...

  回复  引用    
#3楼2008-09-29 18:08 | zf[未注册用户]

$('#commentForm').bind('form-pre-serialize', function(event, form, options, veto) {
tinyMCE.triggerSave();
});


是不是function(event, form, options, veto) 这其中的参数有特殊要求。

  回复  引用  查看    
#4楼2009-01-04 09:36 | 艾面条      
谢谢。哈。郁闷关天。



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1216013




相关文章:

相关链接: