天生我才必有用

AjaxForm和tinyMCE

分类: Javascript    作者:Ray    2008年01月17日

AjaxForm是基于JQuery可以实现Form Ajax的提交的一个组件,而TinyMCE是另一个使用javascript来实现Rich Editor的组件。不过当你需要同时使用这两个组件时,还是有一些主意点必须小心。

TinyMCE通过对Textarea来实现Rich editor,一次也容易令人造成一个假象,觉得TinyMCE的数据就不存在text area中,可以通过取得text area的value属性值就可以获得所要的数据,可能在一般的Form提交中并没有问题,不过Ajax的提交和不同的Form提交还是有一定的区别。为了手动的同步显示和Text area中的数据,用户必须手动的调用tinyMCE.getContent()这个函数来取得。特别是在AjaxForm中,数据在调用beforeSubmit回调函数 时,数据已经保存在AjaxForm的FormData中,不能通过简单的使用以下的语句:$(’#textarea’).value(tinyMCE.getContent())实现数据的更新。必须遍历formData,更新formData的数据才行。

让我来举例说明:

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
});
$(document).ready(function() {
    var options = {
        beforeSubmit: onSubmit,
        success: onSuccess,
        dataType: "json",
    };
    $("#form_info").ajaxForm(options);
});
function onSubmit(formData, jqForm, options){
    for (var i=0; i< formData.length; i++){
        if (formData[i].name == "content"){
            formData[i].value = tinyMCE.getContent();
        }
    }
    return true;
}

其实所有的玄机就在onSubmit中的for循环(例子中的text area的id是content,如果定义其他名字修正此处即可)

标签: , ,