web-dev-qa-db-fra.com

Ckeditor update textarea

J'essaie de faire fonctionner le ckeditor. De toute évidence, il ne fait pas usage de la zone de texte, de sorte que le formulaire n'est pas envoyé dans l'éditeur. Parce que j'utilise des associations polymorphes, etc. Je ne peux pas créer de fonction onsoumettre pour obtenir la valeur de textarea (lorsque le formulaire est soumis). 

J'ai donc trouvé cette question: Utilisation de jQuery pour récupérer le contenu de l'iframe de CKEditor

avec de très bonnes réponses. Les réponses affichées maintiennent la zone de texte à jour. C'est très gentil et juste ce dont j'ai besoin! Malheureusement, je n'arrive pas à le faire fonctionner ... Quelqu'un sait-il pourquoi (par exemple) cela ne fonctionne pas?

J'ai un textarea (Rails mais cela se traduit par un textarea normal):
<%= f.text_area :body, :id => 'ckeditor', :rows => 3 %>

Et les js suivants:

if(CKEDITOR.instances.ckeditor ) {
  CKEDITOR.remove(CKEDITOR.instances.ckeditor);
}
CKEDITOR.replace( 'ckeditor',
{
skin : 'kama',
toolbar :[['Styles', 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Link']]});


CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);

//and paste event
this.document.on("paste", CK_jQ);
}

function CK_jQ()
{
 CKEDITOR.instances.ckeditor.updateElement(); 
}

Je reçois le message "erreur" suivant dans mon firebug. 
missing ) after argument list [Break on this error] function CK_jQ()\n

textareackeditor
36
heldopslippers

l'as-tu compris?

J'utilise CKEditor version 3.6.1 avec le gestionnaire d'envoi de formulaire jQuery. Lors de l'envoi, la zone de texte est vide, ce qui pour moi n'est pas correct. Toutefois, il existe une solution de contournement simple que vous pouvez utiliser, en supposant que tous vos textes CKEditor aient la classe css ckeditor .

$('textarea.ckeditor').each(function () {
   var $textarea = $(this);
   $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});

Exécutez ce qui précède avant d’effectuer votre traitement de soumission, c’est-à-dire. validation du formulaire.

55
TJ.

Avant de soumettre faire:

for(var instanceName in CKEDITOR.instances)
    CKEDITOR.instances[instanceName].updateElement();
109
xtds

Combinaison de toutes les réponses ci-dessus en une seule.

Créez un nouveau fichier custom.js et ajoutez ceci:

CKEDITOR.on('instanceReady', function(){
  $.each( CKEDITOR.instances, function(instance) {

    CKEDITOR.instances[instance].on("instanceReady", function() {
      this.document.on("keyup", CK_jQ);
      this.document.on("paste", CK_jQ);
      this.document.on("keypress", CK_jQ);
      this.document.on("blur", CK_jQ);
      this.document.on("change", CK_jQ);
    });
  });

});

function CK_jQ() {
  for ( var instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); }
}

Vous n'avez pas à vous soucier du nom de la zone de texte, il vous suffit d'ajouter une classe ckeditor dans la zone de texte, en haut et vous avez terminé.

9
JohnDel

Merci @JohnDel pour l'info, et j'utilise onchange pour le mettre à jour à chaque changement.

CKEDITOR.on('instanceReady', function(){
   $.each( CKEDITOR.instances, function(instance) {
    CKEDITOR.instances[instance].on("change", function(e) {
        for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
    });
   });
});
8
Kenny Ong

ADD Fonction JavaScript pour mise à jour

function CKupdate() {
  for (instance in CKEDITOR.instances)
    CKEDITOR.instances[instance].updateElement();
}

C'est du travail. Cool

4
Donot Don't

Il suffit d'ajouter

CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances. textAreaClientId.updateElement();});

où textAreaClientId est votre nom d'instance

Cordialement

1
Mhmd

En charge:

$(function () {
  setTimeout(function () {
    function CK_jQ(instance) {
      return function () {
        CKEDITOR.instances[instance].updateElement();
      };
    }

    $.each(CKEDITOR.instances, function (instance) {
      CKEDITOR.instances[instance].on("keyup", CK_jQ(instance));
      CKEDITOR.instances[instance].on("paste", CK_jQ(instance));
      CKEDITOR.instances[instance].on("keypress", CK_jQ(instance));
      CKEDITOR.instances[instance].on("blur", CK_jQ(instance));
      CKEDITOR.instances[instance].on("change", CK_jQ(instance));
    });
  }, 0 /* 0 => To run after all */);
});
0
Eduardo Cuomo
CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);

//and paste event
this.document.on("paste", CK_jQ);
})
0
anonymous