web-dev-qa-db-ja.com

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]",
});

投稿されたテキスト領域の値を取得するために、何を変更すべきか、そしてその理由を説明してもらえますか？

jquerytinymce
97
Agus Puryanto

フォームを送信する前に、tinyMCE.triggerSave();を呼び出します

167
eldar

次のように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のコメントに基づいて更新されました

102
Dan Malcolm

TinyMCE、jQueryおよびAjaxフォーム から：

TinyMCEフォームの提出

  • テキストエリアがTinyMCEに置き換えられると、実際には非表示になり、代わりにTinyMCEエディター（iframe）が表示されます。
  • ただし、フォームの送信時に送信されるのはこのテキストエリアのコンテンツです。そのため、フォームの送信前にその内容を更新する必要があります。

  • 標準のフォーム送信の場合、TinyMCEによって処理されます。 Ajaxフォーム送信の場合は、（フォームが送信される前に）呼び出して手動で行う必要があります。

    tinyMCE.triggerSave();

$('form').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
});
28
morgan

それはもはやテキストエリアではないからです。 iframe（およびその他）に置き換えられ、serialize関数はフォームフィールドからのみデータを取得します。

非表示フィールドをフォームに追加します。

<input type="hidden" id="question_html" name="question_html" />

フォームを投稿する前に、エディターからデータを取得し、非表示フィールドに入力します。

$('#question_html').val(tinyMCE.get('question_text').getContent());

（もちろん、フォームを通常に投稿した場合、エディターがそれ自体を処理しますが、フォームをスクレイピングし、フォームを使用せずにデータを自分で送信するため、フォームのonsubmitイベントはトリガーされません。）

27
Guffa

フォームでajaxを実行する場合、最初にテキストエリアを更新するようTinyMCEに指示する必要があります。

// TinyMCE will now save the data into textarea
tinyMCE.triggerSave(); 
// now grap the data
var form_data = form.serialize();
18
Kris Khairallah

私が使用した：

var save_and_add = function(){
    tinyMCE.triggerSave();
    $('.new_multi_text_block_item').submit();
};

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

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

これにより、textareaのフォーカスを失ったときにコンテンツが保存されます。

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

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

1
Spocke

私はしばらくこの問題を抱えていましたが、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）からデータを取得することだけです。

1
James111

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

私はjQuery TinyMCEプラグインに変更しましたが、他に何もすることなく現在動作しています。私は、彼らがjQueryバージョンのTinyMCEに何らかの自動triggerSaveを実装していると考えています。

1
SupaMonkey

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

0
Andrew Tevington

私は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();
});

わたしにはできる。

0
gzerone

まず第一に：

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

  2. 最も簡単で安全な方法の1つは、triggerSaveでgetContentとsetContentを使用することです。例：

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