AjaxForm和tinyMCE

Ray — Thu, 17 Jan 2008 06:39:56 +0000

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，如果定义其他名字修正此处即可）

天生我才必有用 » AjaxForm

AjaxForm和tinyMCE