web-dev-qa-db-fra.com

jQuery et TinyMCE: la valeur textarea n'est pas soumise

J'utilise jQuery et TinyMCE pour soumettre un formulaire, mais il existe un problème de sérialisation dans la mesure où la valeur Textarea n'est pas publiée.

Voici le code:

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

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

Pouvez-vous m'expliquer ce que je devrais changer et pourquoi, afin que la valeur affichée dans la zone de texte soit affichée?

jquerytinymce
97
Agus Puryanto

Avant de soumettre le formulaire, appelez tinyMCE.triggerSave();

167
eldar

Vous pouvez configurer TinyMCE comme suit pour que les valeurs des zones de texte masquées restent synchronisées au fur et à mesure que les modifications sont effectuées via les éditeurs TinyMCE:

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

Les éléments textarea seront automatiquement mis à jour et vous n'aurez besoin d'aucune étape supplémentaire avant de sérialiser les formulaires, etc.

Cela a été testé sur TinyMCE 4.0

Démo en cours d'exécution à: http://jsfiddle.net/9euk9/49/

Mise à jour: le code ci-dessus a été mis à jour sur la base du commentaire de DOOManiac

102
Dan Malcolm

De formes TinyMCE, jQuery et Ajax :

Soumission de formulaire TinyMCE

  • Lorsqu'un texte est remplacé par TinyMCE, il est en réalité masqué et l'éditeur TinyMCE (un iframe) s'affiche à la place.
  • Toutefois, c'est le contenu de cette zone de texte qui est envoyé lors de l'envoi du formulaire. Par conséquent, son contenu doit être mis à jour avant la soumission du formulaire.

  • Pour une soumission de formulaire standard, elle est gérée par TinyMCE. Pour l'envoi d'un formulaire Ajax, vous devez le faire manuellement, en appelant (avant l'envoi du formulaire):

    tinyMCE.triggerSave();

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

C'est parce que ce n'est plus une zone de texte. Elle est remplacée par un iframe (et tout le reste) et la fonction de sérialisation récupère uniquement les données des champs de formulaire.

Ajouter un champ caché au formulaire:

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

Avant de poster le formulaire, obtenez les données de l'éditeur et mettez-les dans le champ caché:

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

(L’éditeur s’occupera bien sûr de cela lui-même si vous postez le formulaire normalement, mais comme vous extrayez le formulaire et envoyez vous-même les données sans utiliser le formulaire, l’événement onsubmit n’est jamais déclenché.

27
Guffa

Lorsque vous exécutez ajax sur votre formulaire, vous devez d'abord dire à TinyMCE de mettre à jour votre textarea:

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

J'ai utilisé:

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

C'est tout ce que vous devez faire.

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

Cela garantira que le contenu sera sauvegardé lorsque vous perdrez le focus de la zone de texte

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

Vous pouvez également simplement utiliser le plug-in jQuery et le package pour TinyMCE, qui résout ce type de problèmes.

1
Spocke

J'ai eu ce problème pendant un moment et triggerSave() ne fonctionnait pas, pas plus que les autres méthodes.

J'ai donc trouvé un moyen qui fonctionnait pour moi (j'ajoute ceci ici car d'autres personnes ont peut-être déjà essayé de déclencher triggerSave et 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 ...
});

Lorsque vous soumettez votre formulaire ou quoi que vous fassiez, tout ce que vous avez à faire est de récupérer les données de votre sélecteur (Dans mon cas: .tinymce) À l'aide de $('.tinymce').text().

1
James111

@eldar: J'ai eu le même problème avec 3.6.7 s'exécutant en "mode normal"; et ni triggerSave ni save () ne fonctionnaient.

J'ai changé pour le plugin jQuery TinyMCE et sans avoir à faire autre chose, cela fonctionne maintenant. Je suppose qu’à un moment donné, ils ont mis en place une sorte de déclencheur automatique pour la version jQuery de TinyMCE.

1
SupaMonkey

tinyMCE.triggerSave(); semble être la bonne réponse, car elle synchronisera les modifications apportées de l'iFrame à votre zone de texte.

Pour ajouter aux autres réponses cependant - pourquoi avez-vous besoin de cela? J'utilisais tinyMCE depuis un certain temps et je n'avais pas rencontré de problèmes liés à l'absence de champs de formulaire. Après quelques recherches, il s’est avéré que c’est leur "correctif automatique" des éléments soumis, qui est activé par défaut - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Fondamentalement, ils redéfinissent submit pour appeler triggerSave auparavant, mais uniquement si submit n'a pas déjà été redéfini par autre chose:

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

Donc, si quelque chose dans votre code (ou une autre bibliothèque tierce) joue avec submit, leur "correction automatique" ne fonctionnera pas et il deviendra nécessaire d'appeler triggerSave.

EDIT: Et dans le cas du PO, submit n'est pas appelé du tout. Comme il est ajax, cela évite le "correctif automatique" décrit ci-dessus.

0
Andrew Tevington

Je viens de cacher () le tinymce et soumettre le formulaire, la valeur modifiée de textarea manquant. Alors j'ai ajouté ceci:

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

Ça marche pour moi.

0
gzerone

Tout d'abord:

  1. Vous devez inclure le plugin tinymce jquery dans votre page (jquery.tinymce.min.js)

  2. L'un des moyens les plus simples et les plus sûrs consiste à utiliser getContent et setContent avec triggerSave. Exemple:

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