CKEditor.NET: Insert multiple events on instance

En este post vamos a ver cómo podemos incluir eventos en el editor de texto html CKEditor, en su versión de ASP.NET.

Dado que la documentación existente para este complemento es un poco escasa, creo que puede ser un post interesante, maxime cuando no he encontrado muchas referencias en la web, incluso buscando en "San Google".

Para controlar la inserción de nuevos eventos en CKEditor, tenemos la posibilidad de hacerlo vía javascript. El problema surge cuando en vez de utilizar la librería tal cual, y convertir nuestros Textarea a CKEditor, implementamos directamente los controles que ofrece la dll "CKEditor:CKEditorControl".

Tras una árdua búsqueda, y no encontrar nada más que la opción de código <INSTANCE>.config.CKEditorInstanceEventHandler, me encontré con la desagradable sorpresa de que el propio objeto CKEditorInstanceEventHandler sólo almacena el primer evento generado con la lista. Por tanto, si intentamos hacer algo similiar a esto...:

CODIGO ERRÓNEO

<INSTANCE>.config.CKEditorInstanceEventHandler = new System.Collections.Generic.List<object>();

<INSTANCE>.config.CKEditorInstanceEventHandler.Add(new object[] { "instanceReady", "MyInstanceReadyFunction" });

<INSTANCE>.config.CKEditorInstanceEventHandler.Add(new object[] { "paste", "MyPasteFunction" });

...observaremos que el segundo evento no se lanza jamás.

Llegados a este punto,sólo nos queda pensar cómo instanciar todos nuestros eventos, sobre todo cuando el control CKEditor:CKEditorControl lanza exclusivamente el primero.

Sorprendentemente la respuesta no podía ser más sencilla. Puesto que podemos implementar los eventos por javascript, lo único que nos restaría por hacer, es generar una función Javascript que realice ese trabajo, recibiendo como parametro el control a inicializar.

Con este fragmento de código, y modificandolo en funcion de nuestras necesidades, podremos añadir tantos eventos como sea necesario.

CODIGO ASP.NET

<INSTANCE>.config.CKEditorInstanceEventHandler = new System.Collections.Generic.List<object>();

<INSTANCE>.config.CKEditorInstanceEventHandler.Add(new object[] { "instanceReady", "MyInstanceReadyFunction" });

CÓDIGO JAVASCRIPT

/**

* Funcion que inicializa la instancia CKEditor, a partir del evento instanceReady

* @param {Event} Objeto a instanciar

*/

function MyInstanceReadyFunction (evt) {

    var maxLength = 255;

    evt.editor.on('paste', function (e) {

        e.data.html = strip_tags(e.data.html, tagsPermitidas);

        checkLength(e, maxLength);

    });

    evt.editor.on('key', function (e) {

        checkLength(e, maxLength);

    });

}

Concretamente en este ejemplo, la inicialización de eventos incluye:
· 'paste': que controla el texto que se va a pegar, y suprime los tags HTML que no permito en dicho campo,
· 'key': que controla la escritura de texto, hasta llegar a un nº máximo de caracteres establecidos.

Evidentemente, incluir o modificar éstos, es cuestión de cambiar el código.

Incluyo este ejemplo con 'paste' y 'key' porque sé que hay muchos ejemplos para incluir una limitación de caracteres en CKEditor, pero no es fácil encontrarlos.

Respecto a la función para eliminar los tags no permitidos, os adjunto el código un poco más abajo.

FUNCION PARA ELIMINAR TAGS NO PERMITIDOS

/* Variable global que controla los tags permitidos en la edición */

var tagsPermitidas = '<div><p><span><h1><h2><h3><h4><h5><h6><li><ul><ol><b><strong><small><u><i><em><a><sup><sub>';

/**

* Devuelve un codigo HTML limpio de etiquetas, salvo las permitidas

* @param {String} Cadena de entrada

* @param {String} Tags de apertura permitidos

* @return {String} Cadena limpia

*/

function strip_tags(input, allowed) {

    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)

    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,

       commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;

    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {

        return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';

    });

}

CODIGO PARA CONTROLAR EL TAMAÑO MÁXIMO checkLength: 
Referencia en el blog dotRody CKEditor Maximun Length.

NOTA: Tener en cuenta que el límite máximo indicado en la instancia, hace referencia al texto, y no al conjunto total con sus estilos y tags html. Si no se tiene en cuenta la dimensión del texto con éstos parámetros, nos podemos llevar una mala sorpresa al insertarlo en la DDBB, donde tendremos un error de 'Overflow'.

Espero que os sirva y os ahorre un buen tiempo de búsqueda.
Un saludo a todos!