jQuery und TinyMCE: Der Textbereichswert wird nicht übermittelt

Ich verwende jQuery und TinyMCE , um ein Formular zu senden, aber es gibt ein Problem bei der Serialisierung, da der Textarea-Wert nicht veröffentlicht wird.

Hier ist der Code:

<form id="myForm" method="post" action="post.php">
    <textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>

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

Können Sie mir erklären, was ich ändern sollte und warum, um den Wert im Textbereich zu erhalten?

Rufen Sie vor dem Absenden des Formulars an tinyMCE.triggerSave();

Sie können TinyMCE wie folgt konfigurieren, um die Werte ausgeblendeter Textbereiche synchron zu halten, wenn Änderungen über TinyMCE-Editoren vorgenommen werden:

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
});

Die Textbereichselemente werden automatisch auf dem neuesten Stand gehalten und Sie benötigen keine zusätzlichen Schritte, bevor Sie Formulare usw. serialisieren.

Dies wurde auf TinyMCE 4.0 getestet

Demo läuft unter: http://jsfiddle.net/9euk9/49/

Update: Der obige Code wurde basierend auf dem Kommentar von DOOManiac aktualisiert

Aus TinyMCE-, jQuery- und Ajax-Formularen :

Einreichung des TinyMCE-Formulars

• Wenn ein Textbereich durch TinyMCE ersetzt wird, ist er tatsächlich ausgeblendet und stattdessen wird der TinyMCE-Editor (ein Iframe) angezeigt.

• Es ist jedoch der Inhalt dieses Textbereichs, der gesendet wird, wenn das Formular gesendet wird. Folglich muss der Inhalt vor dem Absenden des Formulars aktualisiert werden.

• Für eine Standardformularübermittlung wird sie von TinyMCE verwaltet. Für eine Ajax-Formularübermittlung müssen Sie dies manuell tun, indem Sie anrufen (bevor das Formular gesendet wird):

  tinyMCE.triggerSave();

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

Das liegt daran, dass es kein Textbereich mehr ist. Es wird durch einen Iframe (und so weiter) ersetzt, und die Serialisierungsfunktion ruft nur Daten aus Formularfeldern ab.

Fügen Sie dem Formular ein verstecktes Feld hinzu:

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

Holen Sie sich vor dem Absenden des Formulars die Daten aus dem Editor und geben Sie sie in das ausgeblendete Feld ein:

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

(Der Editor würde sich natürlich selbst darum kümmern, wenn Sie das Formular normal veröffentlichen. Wenn Sie jedoch das Formular abkratzen und die Daten selbst senden, ohne das Formular zu verwenden, wird das Ereignis onsubmit im Formular niemals ausgelöst.)

Wenn Sie Ajax in Ihrem Formular ausführen, müssen Sie TinyMCE anweisen, zuerst Ihren Textbereich zu aktualisieren:

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

Ich benutzte:

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

Das ist alles was Sie tun müssen.

Dadurch wird sichergestellt, dass der Inhalt gespeichert wird, wenn Sie den Fokus des Textbereichs verlieren

 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]'));

Sie können auch einfach das jQuery-Plugin und -Paket für TinyMCE verwenden, um diese Probleme zu lösen.

Ich hatte dieses Problem für eine Weile und triggerSave() funktionierte nicht, auch keine der anderen Methoden.

Also habe ich einen Weg gefunden, der für mich funktioniert hat (ich füge diesen hier hinzu, weil andere Leute möglicherweise bereits triggerSave und so weiter ausprobiert haben ...):

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 ...
});

Wenn Sie Ihre Form sind einreichen oder was auch immer alles , was Sie tun müssen, ist die Daten greifen von Ihrem Wähler (In meinem Fall: .tinymce) verwendet $('.tinymce').text().

@eldar: Ich hatte das gleiche Problem mit 3.6.7 im "normalen Modus"; und weder triggerSave noch save () funktionierten.

Ich habe zum jQuery TinyMCE-Plugin gewechselt und ohne etwas anderes tun zu müssen, funktioniert es jetzt. Ich gehe davon aus, dass sie irgendwann eine Art Auto TriggerSave für die jQuery-Version von TinyMCE implementiert haben.

Ich verstecke () nur das Tinymce und sende das Formular, der geänderte Wert des Textbereichs fehlt. Also habe ich folgendes hinzugefügt:

$("textarea[id='id_answer']").change(function(){
    var editor_id = $(this).attr('id');
    var editor = tinymce.get(editor_id);
    editor.setContent($(this).val()).save();
});

Für mich geht das.

tinyMCE.triggerSave(); scheint die richtige Antwort zu sein, da Änderungen vom iFrame mit Ihrem Textbereich synchronisiert werden.

Um die anderen Antworten zu ergänzen - warum brauchen Sie das? Ich hatte tinyMCE für eine Weile verwendet und war nicht auf Probleme mit Formularfeldern gestoßen, die nicht durchgekommen waren. Nach einigen Recherchen stellte sich heraus, dass es sich um das "automatische Patchen" von Formularelementübermittlungen handelt, das standardmäßig aktiviert ist - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Grundsätzlich definieren sie neu submit, um triggerSavevorher anzurufen , aber nur, wenn dies submit noch nicht durch etwas anderes neu definiert wurde:

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);
    };
}

Wenn also etwas anderes in Ihrem Code (oder einer anderen Bibliothek eines Drittanbieters) in Konflikt gerät submit, funktioniert das "automatische Patchen" nicht und es ist notwendig, es aufzurufen triggerSave.

EDIT: Und tatsächlich wird im Fall des OP überhaupt submitnicht aufgerufen. Da es ajax'd ist, wird das oben beschriebene "automatische Patchen" umgangen.

Zuerst:

1. Sie müssen das Tinymce JQuery Plugin in Ihre Seite aufnehmen (jquery.tinymce.min.js).

2. Eine der einfachsten und sichersten Möglichkeiten ist die Verwendung getContentund Verwendung setContentvon triggerSave. Beispiel:

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