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?
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 laCKEDITOR.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
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();
});
}
posible duplicado de ¿Cómo escuchar eventos básicos en CKEditor?
– A. Rama
22 de enero de 2015 a las 11:20