jQuery および TinyMCE を使用してフォームを送信していますが、シリアル化にはTextarea値が送信されないという問題があります。
コードは次のとおりです。
<form id="myForm" method="post" action="post.php">
<textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>
言語:lang-js
$('#myForm').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').fadeIn('slow');
$('#result').html(data);
$('.loading').hide();
}
})
return false;
});
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,separator,image,separator,justifyleft,justifycenter,justifyright,jformatselect,fontselect,fontsizeselect,justifyfull,bullist,numlist,undo,redo,styleprops,cite,link,unlink,media,advhr,code,preview",
theme_advanced_buttons2 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
extended_valid_elements :"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
});
投稿されたテキスト領域の値を取得するために、何を変更すべきか、そしてその理由を説明してもらえますか?
フォームを送信する前に、tinyMCE.triggerSave();
を呼び出します
次のようにTinyMCEを構成して、TinyMCEエディターを介して変更が行われたときに非表示のテキストエリアの値を同期させることができます。
tinymce.init({
selector: "textarea",
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
Textarea要素は自動的に最新の状態に保たれ、フォームをシリアル化する前に追加の手順は必要ありません。
これはTinyMCE 4.0でテスト済みです
デモの実行場所: http://jsfiddle.net/9euk9/49/
更新:上記のコードは、DOOManiacのコメントに基づいて更新されました
TinyMCEフォームの提出
- テキストエリアがTinyMCEに置き換えられると、実際には非表示になり、代わりにTinyMCEエディター(iframe)が表示されます。
- ただし、フォームの送信時に送信されるのはこのテキストエリアのコンテンツです。そのため、フォームの送信前にその内容を更新する必要があります。
標準のフォーム送信の場合、TinyMCEによって処理されます。 Ajaxフォーム送信の場合は、(フォームが送信される前に)呼び出して手動で行う必要があります。
tinyMCE.triggerSave();
$('form').bind('form-pre-serialize', function(e) {
tinyMCE.triggerSave();
});
それはもはやテキストエリアではないからです。 iframe(およびその他)に置き換えられ、serialize関数はフォームフィールドからのみデータを取得します。
非表示フィールドをフォームに追加します。
<input type="hidden" id="question_html" name="question_html" />
フォームを投稿する前に、エディターからデータを取得し、非表示フィールドに入力します。
$('#question_html').val(tinyMCE.get('question_text').getContent());
(もちろん、フォームを通常に投稿した場合、エディターがそれ自体を処理しますが、フォームをスクレイピングし、フォームを使用せずにデータを自分で送信するため、フォームのonsubmitイベントはトリガーされません。)
フォームでajaxを実行する場合、最初にテキストエリアを更新するようTinyMCEに指示する必要があります。
// TinyMCE will now save the data into textarea
tinyMCE.triggerSave();
// now grap the data
var form_data = form.serialize();
私が使用した:
var save_and_add = function(){
tinyMCE.triggerSave();
$('.new_multi_text_block_item').submit();
};
これはあなたがする必要があるすべてです。
var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));
これにより、textareaのフォーカスを失ったときにコンテンツが保存されます。
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
TinyMCEのjQueryプラグインとパッケージを使用するだけで、これらの種類の問題を整理することもできます。
私はしばらくこの問題を抱えていましたが、triggerSave()
は機能せず、他の方法も機能しませんでした。
だから私は私のために働いた方法を見つけました(他の人がtriggerSaveなどをすでに試しているかもしれないので、私はこれをここに追加しています):
tinyMCE.init({
selector: '.tinymce', // This is my <textarea> class
setup : function(ed) {
ed.on('change', function(e) {
// This will print out all your content in the tinyMce box
console.log('the content '+ed.getContent());
// Your text from the tinyMce box will now be passed to your text area ...
$(".tinymce").text(ed.getContent());
});
}
... Your other tinyMce settings ...
});
フォームを送信するとき、または行う必要があるのは、$('.tinymce').text()
を使用してセレクター(私の場合は.tinymce
)からデータを取得することだけです。
@eldar:「通常モード」で実行している3.6.7で同じ問題が発生しました。また、triggerSaveもsave()も機能していませんでした。
私はjQuery TinyMCEプラグインに変更しましたが、他に何もすることなく現在動作しています。私は、彼らがjQueryバージョンのTinyMCEに何らかの自動triggerSaveを実装していると考えています。
tinyMCE.triggerSave();
はiFrameからテキストエリアに変更を同期するため、正しい答えのようです。
他の答えに追加するには-なぜこれが必要なのですか?私はしばらくの間tinyMCEを使用していましたが、フォームフィールドが通過しないという問題は発生しませんでした。いくつかの調査の後、フォーム要素送信の「自動パッチ適用」であることが判明しました。これはデフォルトで有効になっています- http://www.tinymce.com/wiki.php/Configuration3x:submit_patch
基本的に、submit
を事前に再定義してtriggerSave
を事前に呼び出しますが、ifsubmit
がまだ再定義されていない場合のみ他の何かによって:
if (!n.submit.nodeType && !n.submit.length) {
t.formElement = n;
n._mceOldSubmit = n.submit;
n.submit = function() {
// Save all instances
tinymce.triggerSave();
t.isNotDirty = 1;
return t.formElement._mceOldSubmit(t.formElement);
};
}
そのため、コード(または別のサードパーティライブラリ)でsubmit
が乱れている場合、「自動パッチ」は機能せず、triggerSave
を呼び出す必要があります。
編集:実際、OPの場合、submit
はまったく呼び出されていません。これはajaxされているので、これは上記の「自動パッチ適用」をバイパスしています。
私はtinymceを送信してフォームを送信するだけで、変更されたtextareaの値が欠落しています。だから私はこれを追加しました:
$("textarea[id='id_answer']").change(function(){
var editor_id = $(this).attr('id');
var editor = tinymce.get(editor_id);
editor.setContent($(this).val()).save();
});
わたしにはできる。
まず第一に:
ページにtinymce jqueryプラグインを含める必要があります(jquery.tinymce.min.js)
最も簡単で安全な方法の1つは、triggerSaveでgetContent
とsetContent
を使用することです。例:
tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
tinyMCE.triggerSave();