天生我才必有用

著名的所见即所得编辑器 TinyMCE 终于发布了 3.0 正式版。

TinyMCE 是一个平台独立基于Web的Javascript HTML WYSIWYG编辑器，采用JavaScript/ECMAScript开发。

它的主要特性包括：

1. 主题/模板支持，多语言支持(包括简体中文)
2. 支持通过插 件的方式进行扩展。
3. 可工作在Mozilla Firefox和MSIE、Safari上。

很多网站系统都采用了 TinyMCE，其中包括 ：Wordpress、Joomla等等。同时在官方的Wiki中也包含了丰富的示例，非常容易学习。自己的第一次接触还是使用Joomla的时候。

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