TinyMCE が AjaxForm を送信してデータの取得に失敗する solution_javascript スキル

この記事では、TinyMCE が AjaxForm を送信するときにデータを取得できない問題の解決策を分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

AjaxForm を使用する前に、コメント投稿用の小さな Web フォームを作成し、コメントの内容を TinyMCE を使用して編集しました。ユーザー エクスペリエンスを少し向上させるには、AjaxForm を使用して Ajax 送信を実装します。しかし、予想外のことが起こりました。つまり、最初に送信するたびに、AjaxForm は現在編集されているコメントの内容、つまり TextArea の内容を取得できなくなります。TextArea の内容を送信するには、もう一度 [送信] をクリックする必要があります。

重要なのは、TinyMCE 上のコンテンツは送信前に TextArea に更新されないということです。そこで、送信前にAjaxFormにイベントバインディングがあるかどうかを確認したかったのですが、beforeSubmitイベントにformDataの内容が入力されていることがわかりました。ここで現在のTinyMCEの内容を入力できるのですが、そうではないようにいつも感じます。とてもきれいな解決策。

この問題を解決する他の方法があるかどうかを調べるために、AjaxForm のソース コードを確認したところ、AjaxForm の作成者がこの問題に対する統一された解決策を提案していることがわかりました。

1. js コードは次のとおりです。

コードをコピー コードは次のとおりです:

// フォーム データを抽出する前に操作するためのフック;
// tinyMCE や FCKEditor
などのリッチ エディターで使用すると便利です varveto = {};
this.trigger('form-pre-serialize', [this, options, veto]);
if (veto.veto) {
log('ajaxSubmit: form-pre-serialize トリガー経由で精査された送信');
これを返します;
}

2. FCKEditor と同様:

コードをコピー コードは次のとおりです:

// 'ajaxForm' を使用してフォームをバインドします
$('#commentForm').ajaxForm(options);
// form-pre-serialize イベントをバインドし、form-serialize イベントをトリガーする前に tinyMCE データをテキストエリアに保存します
$('#commentForm').bind('form-pre-serialize', function(event, form, options, veto) {
tinyMCE.triggerSave();
});

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。