Crear plantillas para JoomlaCK

A pesar de la popularidad de otros editores como JCE, en Gnumla siempre hemos preferido el editor JoomlaCK (antiguo JoomlaFCK), por su sencillez, su interfaz amigable y porque tiene opciones de edición muy interesantes. Una de estas opciones es la posibilidad de usar plantillas para nuestros artículos que nos ahorran tener que maquetar una y otra vez y que en muchos casos puede ser una alternativa más que razonable al uso de extensiones más complejas como puede ser un CCK. En este artículo os enseñaremos cómo incluir vuestras plantillas en el editor.

Dentro de los botones que muestra el editor JoomlaCK, se encuentra el que permite usar unas plantillas predefinidas. Así al pinchar en este botón, nos aparecen 3 plantillas genéricas que podemos usar para crear nuestro artículo. Pero estas plantillas no son las únicas que podemos usar, sino que podemos además crear nuevas plantillas para poder usar en un futuro. En nuestro caso vamos a utilizar el nuevo formato de la Joomlaesfera Hispana para mostraros lo sencillo que es hacer una plantilla y facilitar así la creación de artículos en el futuro.

Lo primero que tenemos que hacer es crear el formato que tendrá nuestra plantilla. Para esto una solución muy cómoda es usar el propio JoomlaCK, y usar sus herramientas gráficas. Una vez que tengamos el diseño que queremos, obtenemos el código HTML. En el caso de estar usando el JoomlaCK, pinchamos en el botón "Fuente HTML" situado en la parte superior izquierda de nuestro editor.

Las plantillas de JoomlaCK se encuentran incluidas en el fichero default.js dentro del directorio de que se crea al instalar el editor. Concretamente la ruta de este fichero es:

[JOOMLA]/plugins/editors/jckeditor/plugins/templates/templates

al abrir el fichero nos encontraremos con un código parecido a lo siguiente:

?/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
 
CKEDITOR.addTemplates('default',{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath('templates')+'templates/images/'),templates:[{title:'Image and Title',image:'template1.gif',description:'One main image with a title and text that surround the image.',html:'<h3><img style="margin-right: 10px" height="100" width="100" align="left"/>Type the title here</h3><p>Type the text here</p>'},{title:'Strange Template',image:'template2.gif',description:'A template that defines two colums, each one with a title, and some text.',html:'<table cellspacing="0" cellpadding="0" style="width:100%" border="0"><tr><td style="width:50%"><h3>Title 1</h3></td><td></td><td style="width:50%"><h3>Title 2</h3></td></tr><tr><td>Text 1</td><td></td><td>Text 2</td></tr></table><p>More text goes here.</p>'},{title:'Text and Table',image:'template3.gif',description:'A title with some text and a table.',html:'<div style="width: 80%"><h3>Title goes here</h3><table style="width:150px;float: right" cellspacing="0" cellpadding="0" border="1"><caption style="border:solid 1px black"><strong>Table title</strong></caption></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table><p>Type the text here</p></div>'}]});

Por lo general vuestros editores difícilmente resaltarán la sintaxis, pero en este caso hemos resaltado en color azul todo lo que se corresponde con el HTML de las plantillas, y en color rojo la sintaxis de las plantillas. Si os fijáis entonces en las etiquetas que están en rojo, veréis que hay cuatro posibles valores:ness 

• title:  Se corresponde con el título que le queréis dar a vuestra plantilla
• image: Con esta etiqueta podréis asignar una imagen representativa a vuestra plantilla
• description: Para que podáis asociar una descripción que sirva a los demás usuarios para saber más de la plantilla
• html: Aquí situaremos el código html que hemos creado antes

Es muy importante que tengáis cuidado a la hora de añadir vuestra plantilla porque este tipo de estructuras son muy sensibles a fallos tipográficos como añadir o quitar comillas, así que os recomiendo que cortéis y peguéis los valores de la última plantilla y a partir de ahí los vayáis modificando. En nuestro caso, y para hacer una plantilla de la Joomlaesfera hispana el código a usar sería el siguiente:

,{title:'Joomlaesfera',image:'joomlaesfera.gif',description:'Plantilla para la Joomlaesfera hispana.',html:'<p><img alt="Joomlaesfera hispana" src="images/stories/Joomlaesfera130.png" style="width: 135px; height: 130px; float: left; margin-left: 10px; margin-right: 10px;" />Peque&ntilde;o texto introductorio. Debe ser de al menos un par de l&iacute;neas.</p><p>Lo mejor es usar dos p&aacute;rrafos, por el espacio extra que queda entre ellos por el margen.</p><hr id="system-readmore" /><h4>En los foros oficiales</h4><p>Intro</p><ul class="bullet-6"><li>bla</li><li>&nbsp;</li></ul><h4>Blogs de la joomlaesfera hispana</h4><p>Intro</p><ul class="bullet-1"><li>bla</li><li>&nbsp;</li></ul><h4>Grupos de J!People</h4><p>Intro</p><ul class="bullet-1"><li>bla</li><li>&nbsp;</li></ul><p>&nbsp;</p><p>Cierre</p>'}

Si os fijáis en el elemento image, en nuestro caso hemos puesto una imagen llamada joomlaesfera.gif. Esto no es necesario para que la plantilla funcione y podéis dejar cualquiera de las tres imágenes de las otras plantillas, pero siempre es mucho más agradable trabajar con una imagen personalizada. Para usar esta imagen tenéis que crear primero la misma en formato gif y con un tamaño de 100x70 px. Una vez creada, tenéis que situarla en el directorio [JOOMLA]/plugins/editors/jckeditor/plugins/templates/templates/images y podréis usarla en vuestra plantilla sin problemas.