agregar código para el detector de eventos para la pulsación de teclas en ckeditor

Question

Necesito agregar un detector de eventos para la pulsación de teclas después de cargar el CKEditor. El código es algo como:

CKEDITOR.instances.editor1.document.on('key', function(event) { 
    /* instructions */ 
}); 

alguna idea de dónde puedo añadir el código para eso? ¿En qué archivo o de qué manera?

Answer 1

Código de archivar es algo como esto:

CKEDITOR.on('instanceCreated', function(e) { 
     e.editor.on('contentDom', function() { 
      e.editor.document.on('keyup', function(event) { 
       // keyup event in ckeditor 
      } 
     ); 
    }); 
}); 

Edición - 2014 - Desde esta respuesta todavía está consiguiendo algunos upvotes, me sentí que sería justo señalar, que estaba destinado para CKEditor en versión 3.x. Con la versión 4.x hay un evento de cambio, lo que dará lugar no sólo en eventos clave, sino también después de pegar, deshacer, rehacer, etc.

En el código es algo como esto:

CKEDITOR.on('instanceCreated', function(e) { 
    e.editor.on('change', function (event) { 
     // change event in CKEditor 4.x 
    }); 
}); 

Answer 2

Agregue ese código en su página, o en un archivo .js incluido en su página. No hay misterio sobre ese código.

Answer 3

¿Te necesidad de rastrear los cambios?

Originalmente estaba usando la solución anterior, pero terminé reemplazándola por la OnChange CKEditor plugin. Esto es útil en algunos casos especiales; por ejemplo, si agrega un vínculo utilizando la barra de herramientas, la pulsación de tecla no registrará nada.

Aquí está un ejemplo de código, actualizado para utilizar instanceCreated (instalar AlCambiar primero):

CKEDITOR.on('instanceCreated', function(e) { 
    if (e.editor.name === editorId) { //editorId is the id of the textarea 
     e.editor.on('change', function(evt) { 
      //Text change code 
     }); 
    } 
}); 

Actualización: De acuerdo con la respuesta anterior, CKEditor ahora tiene incorporado un evento de cambio, por lo que no tiene para instalar el complemento para usar esta solución más. Aún puede usar la segunda línea de código para aplicar el cambio a la instancia de CKEditor que desea editar.

Answer 4

He probado algunas de las soluciones propuestas aquí y tengo mi anwser cuando encontré este enlace: http://alfonsoml.blogspot.com.br/2011/03/onchange-event-for-ckeditor.html

El siguiente código funcionó como un encanto:

editor.on('contentDom', function() 
{ 
    editor.document.on('keydown', function(event) 
    { 
     if (!event.data.$.ctrlKey && !event.data.$.metaKey) 
      somethingChanged(); 
    }); 
}); 

Answer 5

CKEDITOR.instances.editor1.on('change', function() { //Do something here.}); 

Este código registra cualquier evento de cambio incluyendo copiar y pegar.

Answer 6

Si la lógica keydown tiene sentido para un plugin dado, se puede incluir en la definición del plugin:

CKEDITOR.plugins.add('customPlugin', { 
    // definition keys... 
    init: function(editor) { 
     // Plugin logic 
     ... 

    // Register a keydown event handler -- http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-key 
    editor.on('key', function(event) { 
     console.log('CKEDITOR keydown event from customPlugin'); // successfully captures keydown when registered from plugin 
    } 
});