Evento para el contenido de ckeditor cambiado

3 minutos de lectura

Si es posible, ¿cómo podemos solucionar el caso de que se modifique el contenido de ckeditor? Por ejemplo, ya hay texto insertado en el contenido del ckeditor, también conocido como área de texto, cuando se abre la página. Luego escribo algo más o borro algo de ese texto. ¿Hay algún evento que se active al que pueda acceder para cambiar una variable cuando se cambia el texto?

Tengo esto para áreas de texto regulares:

$("input,textarea").on("input", function () {
    booleanvar= true;
});

Vi una posible solución en algún lugar que tenía esto:

$('.ckeditor').ckeditorGet().on('key', function (e) {
    //some code
});

Lo intenté, pero no funcionó. Y sí, sé que el área de texto de mi ckeditor tiene “ckeditor” como su clase, así que esa no es la razón por la que no funciona.

Entonces, ¿algo como esos ejemplos que puedo usar para llegar a algún tipo de evento de cambio de texto de ckeditor?

  • posible duplicado de ¿Cómo escuchar eventos básicos en CKEditor?

    – A. Rama

    22 de enero de 2015 a las 11:20

Sí, hay la muy útil. change incluso que usted puede escuchar. Documentación aquí: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

Úselo, por ejemplo, así (cambie editor1 a su instancia de editor):

CKEDITOR.instances.editor1.on('change', function() { 
    console.log("TEST");
});

  • Eso probablemente funcione, pero el método solo se llama cuando se carga la página (momento en el que el ckeditor aún no está instanciado) y luego ya no se llama, ¿se supone que eso sucederá? Tenga en cuenta que estoy reemplazando el área de texto por ckeditor simplemente configurando la clase = “ckeditor” del área de texto

    – Micael Florencio

    22 de enero de 2015 a las 15:03


  • Ok, eso está resuelto, solo faltaba agregar CKEDITOR.replace( 'editor1' ); justo antes de la CKEDITOR.instances.editor1.on.... para que ya esté instanciado. Funciona bien después

    – Micael Florencio

    22 de enero de 2015 a las 15:24

  • Solo un comentario: cambio el evento se dispara desde deshacer complemento, por lo que debe deshacer el complemento para usar el evento de cambio.

    –Marek Lewandowski

    23 de enero de 2015 a las 10:23

  • Probé un montón de implementaciones pero solo esta funcionó (versión 4.5)

    – pat capozzi

    21/10/2015 a las 20:29

  • @MarekLewandowski gracias por esta pista… ni siquiera sabía que olvidé el complemento de deshacer… esta nota debe agregarse a los documentos

    – Can Raú

    16 de abril de 2016 a las 4:29

Espero que esto pueda ayudar a alguien más que se encuentre con esta publicación como yo. Si está usando CKEditor5, podría intentar esto:

ClassicEditor.create(document.querySelector('#editor'))
.then(editor => {
    editor.model.document.on('change:data', (evt, data) => {
        console.log(editor.getData());
    });
})
.catch(error => {
    console.error('Editor initialization error.', error);
});

  • ¡¡Me ayuda!! Gracias

    – La Fortuna

    25 de agosto de 2021 a las 20:48

  • ¡Funcionando perfectamente! Gracias.

    –Amar Abdul Aziz

    13 de diciembre de 2021 a las 8:52

Avatar de usuario de Dave
dave

Me ayuda mucho, para onchange de CHEQUEADOR.

<textarea id="ckeditor_textarea " name="ckeditor_textarea ">Add Yore Data</textarea>

<script type="text/javascript">
var editor = CKEDITOR.replace( 'ckeditor_textarea ', {});
// editor is object of your CKEDITOR
editor.on('change',function(){
    console.log("test");
});
</script>

Si tiene mucho ckeditor (versión 4) en una página, puede usar este código:

CKEDITOR.on('instanceCreated', function(event) {
 var editor = event.editor,
 element = editor.element;
 editor.on('change', function() {
 console.log(element.getId());
 });
 });

Enlace de eventos jQuery simple para CKEditor4

$.fn.onDataChange = function (func) {
    var func = func || function () { };
    CKEDITOR.instances[$(this).attr('id')].on('change', function () {
        func();
    });
}

¿Ha sido útil esta solución?