這篇文章主要介紹了TinyMCE提交AjaxForm獲取不到數據的解決方法,實例分析了對應的源碼部分與相應的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例分析了TinyMCE提交AjaxForm獲取不到數據的解決方法。分享給大家供大家參考。具體分析如下：

在沒有使用AjaxForm前，我做的一個小小的評論提交的Web form，評論內容使用了TinyMCE做文本編輯。為了增加一點點的用戶體驗，就順手拿AjaxForm來實現Ajax提交。可是發現出現了一個意外的事情。就是每次提交，第一次提交時，AjaxForm會無法獲得當前編輯的評論內容，即TextArea里面的內容，要再點擊一次提交，才能將TextArea的內容提交上去。

關鍵是TinyMCE上的內容沒有在提交前更新到TextArea中。于是想看看AjaxForm是否有在提交前的事件綁定，發現在beforeSubmit事件中，formData的內容已經被填充，雖然可以在此處自行將當前的TinyMCE的內容填充上去，可是總覺得是不太漂亮的解決方案。

為了找是否有其它途徑解決此問題，我查看了一下AjaxForm的源代碼，發現原來AjaxForm作者已經為這問題提出了統一的解決方案，具體源代碼如下：

1. js代碼如下：

代碼如下:

// 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;

}

2. 對應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();

});

希望本文所述對大家的javascript程序設計有所幫助。

更多信息請查看IT技術專欄