Detectando sucesos onChange desde un CKEditor utilizando Jquery

dom-events

Question

Estoy trabajando con CKEditor y jQuery y me gustaría alternar un indicador a verdadero siempre que un usuario cambie el valor de un campo. Uno de esos campos es una instancia de CKEditor.

Todas las áreas de texto que tienen la clase "wysiwyg" se convierten a CKEditors pero de alguna manera el evento $(''.wysiwyg'').change() Change $(''.wysiwyg'').change() nunca se detecta. Hice algunas búsquedas en Google, pero la combinación de palabras clave parece no traer más que resultados irrelevantes (mi google-fu apesta).

Gracias por cualquier ayuda :)

Editar:

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

Probé el código anterior y no funciona. No me da un error, lo que significa que encuentra los objetos CKEditor, pero por alguna razón el oyente no está conectado a él.

Además, si reemplazo el archivo adjunto del evento con solo alert(CKEDITOR.instances[i].name); alertará el nombre de mi área de texto para que sepa que no estoy intentando adjuntar el evento de clic a nada :)

Answer 1

¡Entiendo!

Primero tuve los editores en mi web creados como textareas con la clase ckeditor, y dejé que ckeditor.js los convirtiera en richTextEditors. Luego probé soluciones distintas de las otras respuestas, pero no pude hacer que funcionen.
Luego cambié el nombre de la clase (a CKeditor), así que tengo que inicializar los editores en mi código. Intenté esto y funciona:

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

Entonces, cuando un editor pierde el foco, comprueba si está sucio y, si lo está, activa la función modificada (la alerta en este ejemplo).

Más tarde lo intenté de nuevo con el plugin onchanges, de esta manera:

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

Ahora funciona también con el complemento (gracias @Alfonso). Pero creo que el complemento hace que el evento de cambios se dispare demasiado, prefiero la primera solución donde los cambios solo se evalúan en blur.

¡Espero que esto ayude! y gracias a todos por su ayuda.

Answer 2

Ahora hay un evento de cambio: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

Lo siguiente está funcionando para mí usando la versión 4.4.3. Debe controlar cuándo cambian el Origen y 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'');
});

Answer 3

Aparentemente, no puedo agregar un comentario porque soy nuevo en el sitio, pero la respuesta de Garry es correcta y la he verificado de manera independiente, así que quería agregar esto.

CKEDITOR.instances [xxx] .on (''change'', function () {alert (''value changed !!'')});

Esto funciona para CKEditor 4+, y captura todos los eventos de cambio, incluyendo deshacer y rehacer, haciendo que el trabajo de js de Alfonso sea innecesario para los nuevos usuarios.

Answer 4

El CKEditor tiene la función a ''checkDirty()'' . La forma más sencilla de comprobar si el valor de CKEditor se ha cambiado es agregar esta pieza de JS en su Código.

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

Nota: emailBody - es la identificación de su campo textarea

Answer 5

Este código alertará al usuario al hacer clic en cualquier enlace de la barra lateral

$("#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;
}

Answer 6

Lo mejor que puedo hacer, básicamente, le da una indicación de si el contenido del editor ha cambiado desde el estado original.

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

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

Answer 7

No he encontrado una solución, pero el siguiente enlace habla más sobre los eventos disponibles con el CKEditor:

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

Esta no es la solución perfecta que estaba buscando, pero estoy usando lo siguiente para marcar que mi contenido ha sido modificado:

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

En realidad, esto no significa que el contenido haya sido modificado, pero que el usuario se haya enfocado o borrado del editor (lo cual es mejor que nada).

Answer 8

No he logrado trabajar en cambio, pero parece que onblur funciona, lo cual puede ser suficiente para tus necesidades.

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

Answer 9

Para el cambio de evento, descargue el plugin onchange http://ckeditor.com/addon/onchange y haga esto

var options_cke ={ toolbar : [ { name: ''basicstyles'', items :[''Bold'',''Italic'',''Underline'',''Image'', ''TextColor''] }, { name: ''paragraph'', items : [ ''JustifyLeft'',''JustifyCenter'',''JustifyRight'',''JustifyBlock'',''BGColor'' ] }, { name: ''font'', items : [ ''Font'',''Styles'']} ], on : { change :function( ev ) { //ev.editor.focus(); console.log(ev); } } }; var editor=$(''yourCkeEditorID'').ckeditor(options_cke);

Answer 10

Para los Googlers posteriores, noté que si creas CKEditor usando esto

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

funciona pero en el formulario submit no actualiza mytextarea value por lo que envía un valor antiguo

pero

si te gusta esto

CKEDITOR.replace(''mytextarea'');

en el formulario enviar, envía un nuevo valor

Answer 11

Puede obtener un complemento (y una explicación sobre qué cosas se detectan como cambios) en esta publicación: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html para que pueda hacer cosas como

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

Answer 12

según lo que puedo ver en el sitio de documentación de CKEditor CKEditor viene con manejo de eventos integrado. Esto significa que debe usar eso en lugar de JQuery para escuchar el evento onChange. Esto también se debe principalmente a que cuando los editores como CKEditors crean sus "fantasías", terminarán escuchando el elemento incorrecto para un cambio. Creo que si puede obtener la referencia del objeto javascript de CKEditor, debería poder escribir algo como esto:

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

Espero que esto ayude.

Answer 13

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

No sé sobre el evento de "cambio", pero el evento "desenfocar" funciona perfectamente para mí cuando estoy usando CKeditor versión 3.6

Answer 14

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

etc