ejemplos - jQuery y TinyMCE: el valor de textarea no envía

tinymce no editable

Question

Estoy usando jQuery y TinyMCE para enviar un formulario, pero hay un problema en la serialización en que 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?

Answer 1

@eldar: tuve el mismo problema con 3.6.7 corriendo en ''modo normal''; y ni triggerSave ni save () estaban funcionando.

Cambié al plugin 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.

Answer 2

Acabo de ocultar () el formulario de tinymce y enviar, el valor cambiado de textarea falta. Así que 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.

Answer 3

Ante todo:

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

2. Una de las maneras más simples y seguras es usar getContent y setContent con triggerSave. Ejemplo:

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

Answer 4

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

Answer 5

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

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

Answer 6

Desde TinyMCE, jQuery y Ajax formas :

Presentación del formulario TinyMCE

• Cuando un área de texto es reemplazado por TinyMCE, en realidad está oculto y en su lugar se muestra el editor TinyMCE (un iframe).
• Sin embargo, es el contenido de esta tabla 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 un envío de formulario estándar, es manejado por TinyMCE. Para enviar un formulario Ajax, debe hacerlo manualmente, llamando (antes de enviar el formulario):

  tinyMCE.triggerSave();

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

Answer 7

Eso es porque ya no es un área de texto. Se reemplaza con un iframe (y otras cosas), y la función de serialización 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());

(Por supuesto, el editor se encargaría de esto si publicara el formulario normalmente, pero a medida que va raspando el formulario y enviando los datos usted mismo sin usar el formulario, el evento onsubmit del formulario nunca se desencadena).

Answer 8

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

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

Answer 9

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

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

Los elementos textarea se mantendrán actualizados automáticamente y no necesitará pasos adicionales antes de serializar formularios, etc.

Esto ha sido probado en TinyMCE 4.0

Demostración que se ejecuta en: http://jsfiddle.net/9euk9/49/

Actualización: el código anterior se ha actualizado en base al comentario de DOOManiac

Answer 10

Solía:

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

Esto es todo lo que necesitas hacer.

Answer 11

También puede usar simplemente el plugin jQuery y el paquete para TinyMCE, que resuelve este tipo de problemas.

Answer 12

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

Así que encontré una manera 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íes tu formulario o lo que sea que tengas que hacer es tomar los datos de tu selector (en mi caso: .tinymce ) usando $(''.tinymce'').text() .

Answer 13

tinyMCE.triggerSave(); parece ser la respuesta correcta, ya que sincronizará los cambios del iFrame a 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 se venían. Después de algunas investigaciones, resultó ser su "parche automático" de envíos de elementos de formulario, que está activada por defecto: http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Básicamente, redefinen submit para llamar a triggerSave antemano, pero solo si el submit aún 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 con submit , su "parche automático" no funcionará y será necesario llamar a triggerSave .

EDITAR: Y en realidad en el caso del OP, submit no se llama en absoluto. Como está ajax, esto está pasando por alto el "parche automático" descrito anteriormente.

Answer 14

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