Détection des événements onChange à partir d’un CKEditor à l’aide de Jquery

Je travaille avec CKEditor et jQuery et j’aimerais changer un indicateur à true chaque fois qu’un utilisateur modifie la valeur d’un champ. Un de ces champs est une instance de CKEditor.

Toutes les zones de texte qui ont la classe “wysiwyg” sont converties en CKEditors mais de toute façon, l’événement $('.wysiwyg').change() n’est jamais détecté. J’ai fait des recherches sur Google, mais la combinaison de mots-clés ne fait apparaître que des résultats non pertinents (mon google-fu est nul).

Merci pour toute aide 🙂

Modifier:

 for (var i in CKEDITOR.instances) { CKEDITOR.instances[i].on('click', function() {alert('test 1 2 3')}); } 

J’ai essayé le code ci-dessus et ça ne marche pas. Cela ne me donne pas une erreur, ce qui signifie qu’il trouve les objects CKEditor, mais pour une raison quelconque l’auditeur n’y est pas attaché?

De plus, si je remplace l’attachement d’événement par une simple alert(CKEDITOR.instances[i].name); ça va alerter le nom de mon textarea donc je sais que je n’essaie pas de joindre l’événement de clic à rien 🙂

Vous pouvez obtenir un plug-in (et une explication sur les éléments détectés en tant que modifications) dans cet article: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html pour que vous puissiez faire des choses comme

 for (var i in CKEDITOR.instances) { CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')}); } 

Je n’ai pas réussi à faire évoluer mon travail, mais onblur semble fonctionner, ce qui peut suffire à vos besoins

 CKEDITOR.instances['name'].on('blur', function() {alert(1);}); 

Il y a maintenant un événement de changement: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

Ce qui suit fonctionne pour moi en utilisant la version 4.4.3. Vous devez gérer lorsque les modifications Source et HTML.

 // Initialize the rich text editor. var bodyEditor = CKEDITOR.replace('emailTemplate_Body', { readOnly: false }); // Handle when the Source changes. bodyEditor.on('mode', function () { if (this.mode == 'source') { var editable = bodyEditor.editable(); editable.attachListener(editable, 'input', function () { alert('source changed'); }); } }); // Handle when the HTML changes. bodyEditor.on('change', function () { alert('change fired'); }); 

Je l’ai!

D’abord, les éditeurs de mon site Web ont été créés sous forme de zones de texte avec la classe ckeditor, et j’ai laissé ckeditor.js les transformer en richTextEditors. Ensuite, j’ai essayé des solutions distinctes des autres réponses, mais je ne pouvais pas les faire fonctionner.
Ensuite, j’ai changé le nom de la classe (en CKeditor), je dois donc initialiser les éditeurs dans mon code. J’ai essayé ceci et ça marche:

   $('.CKeditor').ckeditor(function(){ this.on('blur', function({if(this.checkDirty())alert('text changed!');}); }); 

Ainsi, lorsqu’un éditeur perd le focus, il vérifie s’il est sale et si c’est le cas, il déclenche la fonction modifiée (l’alerte dans cet exemple).

Plus tard, j’ai encore essayé avec le plug-in onchanges, de cette manière:

 $('.CKeditor').ckeditor(); for (var i in CKEDITOR.instances) { CKEDITOR.instances[i].on('change', function() {alert('text changed!');}); } 

Maintenant, ça marche aussi avec le plugin (merci @Alfonso). Mais je pense que le plugin fait que les changements surviennent trop, je préfère la première solution où les changements ne sont évalués que sur le flou.

J’espère que cela t’aides! et merci à tous pour votre aide.

CKEditor a une fonction 'checkDirty()' . La façon la plus simple de vérifier si la valeur de CKEditor a été modifiée consiste à append cette partie de JS dans votre code.

 CKEDITOR.instances['emailBody'].on('blur', function(e) { if (e.editor.checkDirty()) { var emailValChanged=true; // The action that you would like to call onChange } }); 

Note: emailBody – est l’id de votre champ textarea

Le mieux que je puisse faire, en gros, vous donne une indication quant à savoir si le contenu de l’éditeur a changé par rapport à l’état initial.

 var editor = $('#ckeditor').ckeditorGet(); editor.on("instanceReady", function(){ this.document.on("keyup", function(){ console.log(editor.checkDirty()); }); }); 

Je ne suis pas venu avec une solution, mais le lien suivant parle plus des événements disponibles avec le CKEditor:

http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html

Ce n’est pas la solution parfaite que je cherchais, mais j’utilise les éléments suivants pour signaler que mon contenu a été modifié:

 CKEDITOR.on('currentInstance', function(){modified = true;}); 

Cela ne signifie pas que le contenu a été modifié mais que l’utilisateur est concentré ou flou dans l’éditeur (ce qui est mieux que rien).

Pour le changement d’événement, téléchargez le plug-in sur Exchange http://ckeditor.com/addon/onchange et faites-le


 var options_cke = {
          barre d'outils:
         [
             {name: 'basicstyles', éléments: ['Gras', 'Italique', 'Souligné', 'Image', 'TextColor']},
             {name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'BGColor']},
                         {name: 'font', articles: ['Font', 'Styles']}

         ],
                 sur :
                 {
                     changer: fonction (ev)
                     {
                         //ev.editor.focus ();
                         console.log (ev);
                     }
                 }

      };
  var editor = $ ('yourCkeEditorID'). ckeditor (options_cke);
 editor = CKEDITOR.appendTo('container', {resize_enabled: false}); editor.on('key', function () { setTimeout(setHtmlData,10); }); 

etc

d’après ce que je peux voir sur le site de documentation de CKEditor, CKEditor est livré avec une gestion des événements intégrée. Cela signifie que vous devez l’utiliser à la place de JQuery pour écouter l’événement onChange. C’est aussi principalement parce que lorsque des éditeurs comme CKEditors créent leur «fantaisie», vous finirez par écouter le mauvais élément pour un changement. Je crois que si vous pouvez obtenir la référence de l’object javascript CKEditor, vous devriez pouvoir écrire quelque chose comme ceci:

 ckRefObj.on('onChange', function() { /* do your stuff here */ }); 

J’espère que ça aide.

Ce code alertera l’utilisateur en cliquant sur un lien de la barre latérale

 $("#side-menu a").click(function(e){ if(checkUnsaved()){ if (confirm("You have unsaved changes.Do you want to save?")) { e.preventDefault(); } // or ur custom alert } }); function checkUnsaved() { if(CKEDITOR) return CKEDITOR.instances['edit-body'].checkDirty(); // edit-body is the name of textarea in my case. else return false; } 

Je ne peux apparemment pas simplement append un commentaire parce que je suis nouveau sur le site, mais la réponse de Garry est correcte et je l’ai vérifiée de manière indépendante. Je voulais donc append ceci.

CKEDITOR.instances [xxx] .on (‘change’, function () {alert (‘valeur modifiée !!’)});

Cela fonctionne pour CKEditor 4+, et capture tous les événements de modification, y compris l’annulation et la restauration, ce qui rend le travail de Alfonso js inutile pour les nouveaux utilisateurs.

 $(document).ready(function () { CKEDITOR.on('instanceReady', function (evt) { evt.editor.on('blur', function () { compare_ckeditor('txtLongDesc'); }); }); }); 

Je ne sais pas à propos de l’événement ‘change’ mais l’événement ‘flou’ fonctionne parfaitement pour moi lorsque j’utilise CKeditor version 3.6

Pour les Googlers ultérieurs, j’ai remarqué que si vous créez CKEditor en utilisant cette

 $("#mytextarea").ckeditor(); 

cela fonctionne mais sur la soumission de formulaire ne met pas à jour la valeur mytextarea ainsi il envoie la vieille valeur

mais

si vous aimez ça

 CKEDITOR.replace('mytextarea'); 

sur le formulaire soumettre, il envoie une nouvelle valeur