jQuery y TinyMCE: el valor del área de texto no se envía

106

Estoy usando jQuery y TinyMCE para enviar un formulario, pero hay un problema en la serialización porque el valor de Textarea no se publica.

Aquí está el código:

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

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

¿Puede explicarme qué debo cambiar y por qué, para poder publicar el valor en el área de texto?

Agus Puryanto
fuente

Respuestas:

180

Antes de enviar el formulario, llame tinyMCE.triggerSave();

eldar
fuente
15
Usando TinyMCE 3.2+ con el complemento jquery: $('#textarea_id').tinymce().save();en el controlador onSubmit de su formulario.
Brenden
@Brenden Estoy usando la versión 3.5.8 de tinymce y en la consola muestra el error tinymce () no es una función. He solucionado mi problema con eldar
Code Prank
1
La mejor respuesta, corta pero dulce y también es la solución más limpia. También funciona con varios campos. El único inconveniente es que esto activa el ahorro para todos los elementos.
Hugo Zink
tinymce.init ({selector: 'textarea'});
suraj
Dan Malcolm tiene la mejor respuesta para la versión actual; consulte la publicación a continuación; se necesitan 70 votos positivos más para que se enumeren primero.
Robert Guice
115

Puede configurar TinyMCE de la siguiente manera para mantener sincronizados los valores de las áreas de texto ocultas a medida que se realizan cambios a través de los editores de TinyMCE:

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

Los elementos del área de texto se mantendrán actualizados automáticamente y no necesitará ningún paso adicional antes de serializar formularios, etc.

Esto ha sido probado en TinyMCE 4.0

La demostración se ejecuta en: http://jsfiddle.net/9euk9/49/

Actualización: el código anterior se ha actualizado en función del comentario de DOOManiac

Dan Malcolm
fuente
Genial, funciona ahora. No entiendo por qué no se menciona algo como esto en la documentación del editor.
JohnA10
1
tinemce.triggerSave()llama a la save()función para TODOS sus editores activos. Si tiene más de uno, es más eficiente configurar su función onChange así:editor.on('change', editor.save);
DOOManiac
@DooManiac - Buena llamada, gracias. Respuesta y jsfiddle actualizados. Conservé la función anónima en la devolución de llamada para asegurarme de que se llama a guardar como método del objeto editor.
Dan Malcolm
Hay un error con las versiones tinymce superiores a 4.1.0 con los botones en negrita y cursiva para los que la clase 'mce-active' no se agrega directamente (sino solo después de que se escriban algunos caracteres en el campo de área de texto), por lo que los botones no mirada activada ... cableado ... ( jsfiddle.net/9euk9/304 )
Ouatataz
¡Gran solución!
Shakeel Ahmed
29

Desde los formularios TinyMCE, jQuery y Ajax :

Envío del formulario TinyMCE

  • Cuando un área de texto es reemplazada por TinyMCE, en realidad está oculta y en su lugar se muestra el editor TinyMCE (un iframe).

  • Sin embargo, es el contenido de este área de texto el que se envía cuando se envía el formulario. En consecuencia, su contenido debe actualizarse antes del envío del formulario.

  • Para el envío de un formulario estándar, lo maneja TinyMCE. Para el envío de un formulario Ajax, debe hacerlo manualmente, llamando (antes de enviar el formulario):

    tinyMCE.triggerSave();

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

Eso es porque ya no es un área de texto. Se reemplaza con un iframe (y todo eso), y la función serializar solo obtiene datos de los campos del formulario.

Agregue un campo oculto al formulario:

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

Antes de publicar el formulario, obtenga los datos del editor y colóquelos en el campo oculto:

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

(El editor, por supuesto, se ocuparía de esto si publicara el formulario normalmente, pero como está raspando el formulario y enviando los datos usted mismo sin usar el formulario, el evento onsubmit en el formulario nunca se activa).

Guffa
fuente
1
Estoy haciendo esto con el complemento jquery ajaxForm y el valor del área de texto no se pasa hasta mi segundo envío, así que creo que no puede cambiar los datos enviados en el controlador onsubmit.
Brenden
1
@Brenden: si el complemento también usa el evento onsubmit para interceptar el formulario, entonces debe asegurarse de que su controlador de eventos se ejecute primero; de lo contrario, el complemento recopilará los datos del formulario antes de que tenga la oportunidad de mover los datos del editor en un campo de formulario.
Guffa
¿Por qué el voto negativo? Si no explica qué es lo que cree que está mal, no puede mejorar la respuesta.
Guffa
20

Cuando ejecuta ajax en su formulario, primero debe decirle a TinyMCE que actualice su área de texto:

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

Solía:

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

Esto es todo lo que necesitas hacer.

Bob Roberts
fuente
7

Esto asegurará que el contenido se guarde cuando pierda el foco del área de texto.

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });
CyberNinja
fuente
6
var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));
Swyst
fuente
1
El uso de tinyMCE.activeEditor.getContent () fue lo único que pude hacer funcionar. ¡Gracias!
MadTurki
1

También puede simplemente usar el complemento jQuery y el paquete para TinyMCE para resolver este tipo de problemas.

Spocke
fuente
1

Tuve este problema por un tiempo y triggerSave()no funcionó, ni ninguno de los otros métodos.

Así que encontré una forma que funcionó para mí (estoy agregando esto aquí porque otras personas pueden haber probado triggerSave y etc ...):

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

Cuando envía su formulario o lo que sea, todo lo que tiene que hacer es tomar los datos de su selector (en mi caso :) .tinymceusando $('.tinymce').text().

James111
fuente
1

@eldar: Tuve el mismo problema con 3.6.7 ejecutándose en 'modo normal'; y ni triggerSave ni save () estaban funcionando.

Cambié al complemento jQuery TinyMCE y sin tener que hacer nada más está funcionando ahora. Supongo que en algún momento implementaron algún tipo de triggerSave automático para la versión jQuery de TinyMCE.

SupaMonkey
fuente
Interesante hallazgo. Creo que te refieres a la versión 3.5.7. Acabo de hacer algunas pruebas con 3.5.7 y 3.5.8, y en tinyMCE.triggerSave()realidad funciona bien para mí en modo normal. Pero tiene razón en que ya existe algún tipo de guardado automático en el modo jquery, lo que contradice tinymce.com/wiki.php/Plugin:autosave : "Este complemento probablemente se extenderá en el futuro para proporcionar soporte de guardado automático AJAX".
sayap
0

Simplemente oculto () el formulario tinymce y envío, falta el valor cambiado del área de texto. Entonces agregué esto:

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

Esto funciona para mi.

gzerone
fuente
0

tinyMCE.triggerSave(); parece ser la respuesta correcta, ya que sincronizará los cambios del iFrame con su área de texto.

Sin embargo, para agregar a las otras respuestas, ¿por qué necesita esto? Había estado usando tinyMCE por un tiempo y no había tenido problemas con los campos de formulario que no aparecían. Después de algunas investigaciones, resultó ser su "parche automático" de los envíos de elementos de formulario, que está activado de forma predeterminada: http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Básicamente, se redefinen submitpara llamar de triggerSaveantemano, pero solo si submit no ha sido redefinido por otra cosa:

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

Por lo tanto, si algo más en su código (u otra biblioteca de terceros) está jugando submit, su "parcheo automático" no funcionará y será necesario llamar triggerSave.

EDITAR: Y en realidad, en el caso del OP, submitno se llama en absoluto. Dado que es ajax, esto está pasando por alto el "parche automático" descrito anteriormente.

Andrew Tevington
fuente
0

Ante todo:

  1. Debe incluir el complemento tinymce jquery en su página (jquery.tinymce.min.js)

  2. Una de las formas más sencillas y seguras es utilizar getContenty setContentcon triggerSave. Ejemplo:

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