Plugins para el CKEditor

Este artículo trata sobre la incorporación de un plugin al editor de texto CKEditor, mediante un ejemplo práctico de cómo se dio solución a un requerimiento de uno de los sistemas desarrollados por la empresa SoftPei. La generación automática de documentos en determinado tipo de aplicaciones es imperativa, como lo son aplicaciones de gestión de recursos, gestión de servicios o sistemas contables. Este tipo de aplicaciones por lo general incluye funcionalidades de registro de pagos, ya sea en efectivo o electrónico; o la emisión de algún documento, como un contrato, en el que se incluyen determinadas clausulas para establecer de forma legal derechos y obligaciones de dos o más partes a la hora de recibir o prestar algún recurso o servicio. Los contratos son documentos por lo general escritos y diseñado por algún personal jurídico, pero una vez que el documento está hecho, basta con especificar en determinados campos los datos de las partes y los detalles del acuerdo. Por lo que este documento se convertiría en una plantilla, y el sistema lo utilizaría para emitir un documento con toda la información necesaria listo para ser firmado.

Como se comentó más arriba, el artículo trata de la solución a un requerimiento de uno de los sistemas desarrollados por SoftPei. El sistema debe permitir que un determinado usuario edite, precisamente el documento del contrato que se emite para los servicios que presta un negocio, a partir de una plantilla genérica que ofrece el mismo sistema. Para esto el sistema le proporciona al usuario la plantilla del contrato presentada en el CKEditor y un conjunto de etiquetas que representan los datos de las partes y los detalles del acuerdo (figura 1), como se explicó anteriormente.

Figura 1.

Para lograr el comportamiento que tiene la etiqueta que está en el cuerpo de la plantilla, la cual puede ser arrastrada y soltada en cualquier parte del documento como una entidad única, que puede ser insertada en el editor haciendo click en las etiquetas o arrastrándolas desde el panel lateral derecho y soltándolas en el editor, fue necesario incorporarle un plugin al CKEditor. A continuación, se definen los pasos a seguir para la definición de un pluing para este editor:

Lo primero es definir el nombre del plugin por ejemplo “tags”, hay que ir al directorio raíz del ckeditor y en el directorio plugins crear una carpeta y nombrarla “tags” que es el nombre que le daremos al plugin. Ahora dentro del directorio /tags, establecer la siguiente estructura que todo pluing para el ckeditor debe cumplir:

ckeditor/

            plugins/

                        tags/

                                    iconos/

                                    dialogs/

                                    plugin.js

Una vez asegurada esta estructura de carpetas, sigue definir el código del plugin dentro del archivo “plugin.js”:

CKEDITOR.plugins.add( 'tags', {

    init: function( editor ) {

                 // aquí se definiría el código

                 //o la lógica del plugin
    }
} );

En el caso de nuestro plugin de definieron las instrucciones para que el editor formatee con una estructura permitida por el editor el contenido que se inserta o se arroja dentro del mismo.

Existen instrucciones para crear el icono del plugin, para crear el comando para el plugins que es el que muestra el cuadro de dialogo que pudiera tener definido el plugins y crear el botón del plugin que es el que se mostraría en la barra de herramientas del editor. Pero como nuestro plugin debe funcionar solamente al arrojar contenido dentro dentro del editor y debe funcionar haciendo clicks sobre botones desde fuera del editor, nada de esto se definió.

Para establecer las dependencias de un pluign se define en la variable “requires” dentro de la definición del plgin:

CKEDITOR.plugins.add( 'tags', {

    requires: 'widget',

    init: function( editor ) {

                 // aquí se definiría el código

                 //o la lógica del plugin
    }
} );

Solamente faltaría definir si el contenido que va a reemplazar el plugin tendrá algún diseño en particular con el fin de diferenciarlo visualmente dentro del texto del editor, esto se define en el archivo “contents.css” que esta en el directorio raíz del ckeditor en nuestro caso coloqué la definición de estilo de una clase “tag” y una clase “img” que son las responsables de formatear las etiquetas y el cuadro donde debería ir la imagen del logotipo del negocio.

.tag{

    color: #fff;

    background-color: #356bcc;



    cursor: pointer;

    text-align: center;

    font-weight: normal;

    padding: 2px 12px;

    border-radius: 5px;

    margin-bottom: 3px;

}



.img{

    color: #fff;

    background-color: #5baacc;

    height: 60px;

    width: 150px;

    text-align: center;

    padding-top: 40px;

}

Una vez realizadas todas las configuraciones si un segmento de la plantilla de un contrato luciera de como se muestra en la siguiente figura:

Una vez sustituidas todas las etiquetas el documento generado lucirá de la siguiente forma: