Entre las funcionalidades de CKEditor se encuentra una muy interesante, la posibilidad de usar plantillas en el editor. Además es bastante fácil de implementar. Vamos a ver como configurar nuestro CKEditor para que nos permita mostrar plantillas:
<html>
<head>
<title>ckeditor test</title>
<script src="ckeditor/ckeditor.js"></script>
<script src="editor.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
</body>
</html>
Esta es nuestra página con el editor. Hemos añadido el script de ckeditor y otro más llamado editor.js. En ese archivo está el código siguiente:
window.onload = function() {
CKEDITOR.replace( 'editor',
{
toolbar : 'Full',
templates_files : [ './templates.js' ]
});
}
Hemos añadido una barra completa para que aparezca el botón de plantilla aunque, esto no es estrictamente necesario, bastaba con añadir el botón Templates a la barra de herramientas, como vimos en la segunda parte del tutorial. Vemos que hay una nueva propiedad (templates_files). Esta propiedad es un array en el que indicaremos los nombres de los ficheros donde definimos las plantillas. En este caso solo un archivo, llamado templates.js.
El archivo templates.js tendrá el siguiente código:
// Registramos las plantillas
CKEDITOR.addTemplates( 'default',
{
// La ruta donde están las imágenes de las plantillas
imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
// Definición de las plantillas
templates :
[
{
title: 'Plantilla 1',
image: 'template1.gif',
description: 'Descripción de la plantilla 1.',
html:
'<h2>Pantilla 1</h2>' +
'<p>Inserte el texto aquí.</p>'
},
{
title: 'Plantilla 2',
html:
'<h3>Plantilla 2</h3>' +
'<p>Inserte el texto aquí.</p>'
}
]
});
Ahora vamos a la parte interesante. Para añadir plantillas llamamos al addTemplates, al que le pasamos un nombre y un objeto con los datos necesarios para mostrar las plantillas. El objeto tiene los campos imagePath, donde le indicamos la ruta de la imágenes que aparecerán como vista previa de la plantilla, y templates, un array de objetos que tienen los datos de la plantilla. Estos datos son:
- title: Título de la plantilla.
- image: imagen de vista previa de la plantilla.
- description: descripción de la plantilla.
- html: La plantilla propiamente dicha.
De esta sencilla forma podemos añadir plantillas a nuestro editor. Cuando pulsemos sobre el botón de plantillas nos aparecerá la siguiente ventana:
Ahora solo toca seleccionar nuestra plantilla y esta aparecerá como contenido de nuestro editor, reemplazándolo o añadiéndolo según hayamos indicado en la ventana,
Tags: CKEditor, Editor WYSIWYG, JavaScript, librería, plantillas
