jQueryとTinyMCE：textarea値が送信されない

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、jQueryとAjaxのフォーム：

TinyMCEフォームの送信

• textareaが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();
};

これがあなたがする必要があるすべてです

これにより、テキストエリアのフォーカスを失ったときにコンテンツが確実に保存されます

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });

var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));

また、jQueryプラグインとTinyMCEのパッケージを使用するだけで、これらの種類の問題を解決できます。

私はしばらくの間この問題を抱えていて、機能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）を使用します$('.tinymce').text()。

@eldar：「通常モード」で実行されている3.6.7でも同じ問題が発生しました。また、triggerSaveもsave（）も機能していませんでした。

私はjQuery TinyMCEプラグインに変更しました。他に何もする必要はなく、現在は機能しています。私は、ラインのどこかに、TinyMCEのjQueryバージョン用のある種の自動トリガー保存を実装していると想定しています。

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.triggerSave(); iFrameからの変更をテキストエリアに同期するため、これが正しい答えのようです。

しかし、他の答えに追加するには-なぜこれが必要なのですか？私はしばらくtinyMCEを使用しており、フォームフィールドが表示されないという問題は発生していませんでした。いくつかの調査の結果、フォーム要素送信の「自動パッチ」であることが判明しました。これはデフォルトでオンになっています-http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

基本的に、それらは事前submitに呼び出すように再定義しますがtriggerSave、他の何かによってまだ再定義されていない場合 submitに限ります。

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されているため、これは上記の「自動パッチ」をバイパスしています。

まず第一に：

1. ページにtinymce jqueryプラグインを含める必要があります（jquery.tinymce.min.js）

2. 最も簡単かつ最も安全な方法の一つは、使用しているgetContentとsetContenttriggerSaveで。例：

   tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
   tinyMCE.triggerSave();