web-dev-qa-db-fra.com

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

Je travaille avec CKEditor et jQuery et j'aimerais basculer un indicateur sur true lorsqu'un utilisateur modifie la valeur d'un champ. L'un de ces champs est une instance de CKEditor.

Toutes les zones de texte ayant la classe "wysiwyg" sont converties en CKEditors, mais l'événement $('.wysiwyg').change() n'est jamais détecté. J'ai fait quelques recherches sur Google, mais la combinaison de mots clés ne semble générer 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 cela ne fonctionne pas. Cela ne me donne pas une erreur signifiant qu'il trouve les objets CKEditor mais pour une raison quelconque, l'auditeur n'y est pas attaché?

De plus, si je remplace l'attachement d'événement par alert(CKEDITOR.instances[i].name);, cela alertera le nom de mon textarea, je sais donc que je n'essaie pas d'attacher l'événement click à rien :)

jqueryckeditordom-events
39
Gazillion

Vous pouvez obtenir un plugin (et une explication des modifications détectées) dans cet article: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html so you peut faire des choses comme

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

Je n'ai pas réussi à faire fonctionner le système mais onblur semble fonctionner, ce qui peut suffire à vos besoins.

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

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

Ce qui suit fonctionne pour moi avec la version 4.4.3. Vous devez gérer le changement de 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');
});
13
Garry English

J? ai compris!

Tout d'abord, les éditeurs de mon site Web ont été créés en tant que textareas avec la classe ckeditor, et j'ai laissé le fichier ckeditor.js en faire de richTextEditors. Ensuite, j'ai essayé différentes solutions des autres réponses, mais je n'ai pas réussi à les faire fonctionner.
Puis j'ai changé le nom de la classe (en CKeditor), donc je dois initialiser les éditeurs dans mon code. J'ai essayé ça et ça marche:

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>

$('.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 essayé à nouveau avec le plugin onchanges, de cette façon:

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

Maintenant, cela fonctionne aussi avec le plugin (merci @Alfonso). Mais je pense que le plugin déclenche trop les événements de modifications, je préfère la première solution où les modifications ne sont évaluées que sur le flou.

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

11
Peto

Le CKEditor a une fonction 'checkDirty()'. Le moyen le plus simple de vérifier si la valeur de CKEditor a été modifiée consiste à ajouter 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

8
Ryan Wright

Le mieux que je puisse faire est de vous indiquer fondamentalement si le contenu de l'éditeur a changé par rapport à l'état d'origine.

var editor = $('#ckeditor').ckeditorGet();

editor.on("instanceReady", function(){                    
     this.document.on("keyup", function(){
     console.log(editor.checkDirty());
   });
});
7
Simon

Je n'ai pas trouvé de solution, mais le lien suivant en dit plus sur les événements disponibles avec CKEditor:

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

Ce n'est pas la solution parfaite que je cherchais, mais j'utilise ce qui suit pour signaler que mon contenu a été modifié:

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

Cela ne signifie pas réellement que le contenu a été modifié, mais que l'utilisateur s'est concentré ou estompé depuis l'éditeur (ce qui est mieux que rien).

3
Gazillion

Pour changer d’événement, téléchargez le plugin onchange http://ckeditor.com/addon/onchange et faites-le.


 var options_cke = {
 barre d'outils: 
 [
 {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Image', 'TextColor']}, 
 {nom: 'paragraphe', éléments: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'BGColor']}, 
 {nom: 'police', éléments: ['police', 'styles']} 

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

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

etc

2
user1005462

d'après ce que je peux voir sur le site de documentation de CKEditor, CKEditor est livré avec la gestion d'événements construite. Cela signifie que vous devriez utiliser cela au lieu de JQuery pour écouter l'événement onChange. Cela tient aussi principalement au fait que lorsque des éditeurs tels que CKEditors créent leurs fichiers "fantaisistes", vous finissez par écouter le mauvais élément pour un changement. Je pense que si vous pouvez obtenir la référence de l’objet javascript de CKEditor, vous devriez être capable d’écrire quelque chose comme ceci:

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

J'espère que ça aide.

1
Simon H

Ce code avertira 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;
}
0
Serjas

Je ne peux apparemment pas simplement ajouter 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 ajouter ceci.

CKEDITOR.instances [xxx] .on ('change', function () {alert ('la valeur a été modifiée !!')});

Cela fonctionne pour CKEditor 4+ et capture tous les événements de changement, y compris les annulations et les restaurations, rendant le travail js d'Alfonso inutile pour les nouveaux utilisateurs.

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

Je ne connais pas l'événement 'change' mais l'événement 'flou' fonctionne parfaitement pour moi lorsque j'utilise CKeditor version 3.6

0
Himalaya Garg