首頁 > web前端 > js教程 > TinyMCE提交AjaxForm取得不到資料的解決方法_javascript技巧

TinyMCE提交AjaxForm取得不到資料的解決方法_javascript技巧

WBOY
發布: 2016-05-16 16:10:59
原創
1086 人瀏覽過

本文實例分析了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程式設計有所幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板