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,
Artículos relacionados:
Tags: CKEditor, Editor WYSIWYG, JavaScript, librería, plantillas
Gracias! me vino muy bien este resumen.
Buenas,podrías ayudarme ¿?Tengo el CKEditor ya instalado, configurado a mi gusto y retocado.Mi idea es que dependiendo del tipo de usuario que entre a la página dónde lo tengo configurado muestre unas plantillas u otras.Para ello tengo una variable en PHP que arrastro y que puedo utilizar para abrir un js diferente por cada tipo de usuario o meter un if o un case para mostrar o no una de las plantillas dentro del js default.Cómo lo hago?Gracias.
Muy interesante lo que comparte el amigo iMad, yo sigo trabajando en como implementar las plantillas a mi ckeditor.Gran aporte!!! Muchas gracias por el artículo.
Perdonad por que haya tardado tanto en contestar. Se me ocurren varias formas para hacer esto, pero es largo de explicar. Voy a tratar de escribir algo durante el fin de semana, a ver si el lunes puedo publicarlo.
Hola me parece excelente, como muestras todo no se si es mucho pedir pero como seria la forma de guardar los datos, en mysql ya que actualmente me esta sacando error.gracias
Andres, para guardarlo en mysql tienes que recoger el contenido del textarea como si fuera cuealquier otro campo de formulario. Si me das algo más de información sobre el error podría ver que está ocurriendo.
Hola Manuel, Tengo un gran problema, estoy haciendo un proyecto que estoy por terminar, pero no puedo implementar el ckeditor, por mas que lo he intentado.Tengo 2 problemas:1. En un apagina donde pongo un menu, agrego el scrip del ckeditor, al darle click por ejemplo a productos me lista los productos (pero solo se actualiza el div del area de trabajo) al seleccionar un producto me muestra su informacion para editarla y me muestra muy bien el ckeditor, pero al volver al listado y seleccionar otro producto me desaparece el campo y ya no me muestra nada, desaparece totalmente el textarea, y no se porque.2. En la primera ocasion cuando me muestra el ckeditor intento modificar los datos para guardarlos en una BD y en la pagina me lo hace bien, pero para guardar los datos ya no, es decir, cuando vuelvo a entrar aparece como antes sin cambios y el resto de los campos si me los actualiza.PUEDES AYUDARME??
Isabel, necesitaría algo más de información, o ver parte del código.
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
MicrosoftInternetExplorer4
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin-top:0in;
mso-para-margin-right:0in;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0in;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:”Times New Roman”;
mso-bidi-theme-font:minor-bidi;}
Manuel
Gracias por contestar….
Tratare de explicarme:
Tengo una pagina index.php con el siguiente codigo:
<script
type=”text/javascript” src=”ckeditor/ckeditor.js“></script>
en el body
tengo un div que es donde realizo mi parte dinamica:
<div id=”contenido-area-trabajo”>
</div>
En este div
mando llamar diferentes paginas php para que se muestren diferentes
datos…. es aqui donde tengo que usar el ckeditor, por ejemplo, mando llamar a
travez de un script la pagina “informacion.php” que es la que trae el textarea
para modificar y el replace
<textarea
name=”beneficios” id=”beneficios” rows=”3″ style=”width:
400px;”> </textarea>
</td>
</tr>
<script type=”text/javascript”>
CKEDITOR.replace(‘beneficios’,{toolbar :
‘Basic’}</script>
hasta aqui aparece bien el ckeditor pero luego mando llamar “consulta.php” para
que aparezca en el div y de nuevo tengo que llamar “informacion.php” para otra
informacion y al llamar esta pagina la segunda vez ya no me aparece nada en el
ckeditor y no se porque.
Ademas en la primera vez (cuando si aparece el ckeditor) y modifico o le doy
formato a “beneficios” lo mando guardar en una BD para despues
llamarlo en otra pagina y no me guarda el formato (no me hace ningún cambio de
nada que según lei es para lo que nos sirve el ckeditor). Espero haberme explicado y que me puedas
ayudar..
Gracias de antemano.
Hola,tengo una duda sobre el ckeditor a ver si me la puedes resolver.tengo un tabs jquery, y no me carga el ckeditor, si lo uso en una pagina si, pero cargando el contenido en un div con ajax o con el tabs no.sabes porque puede ser?archivo index.html<ul><li><a href=”prueba.html”></li><li><a href=”prueba1.html”></li></ul>archivo prueba.html<script type=”text/javascript” src=”js/ckfinder/ckfinder.js”></script><script type=”text/javascript”>window.onload = function(){ CKEDITOR.replace( ‘editor’);}</script><textarea name=”editor”>prueba</textarea>si abro directamente prueba.html me abre el ckeditor. muy extraño no? he probado de cargar los scripts en index pero tampoco.Gracias!
Holaa como estas gracias por la ayuda al publicar este blog, pero tengo una duda, lo que escribo en el area de texto mando a guardar a una base de datos, bueno despues de eso como hago para presentar en pantalla lo que guarde porque segun tengo entendido tengo que codificar lo que guardo del ckeditor
David’s Tech Blog…
[...]below you’ll find the link to some sites that we think you should visit[...]…
hola amigo, gracias por tus tutoriales sobre ckeditor.Pero tengo un problema al momento de listar el contenido del ckeditor ya que utilizo un estilo reset.css (eric meyer) y me resetea los estilos del ckeditor.si quito el reset.css del index, mi problema se soluciona pero eso no quiero, alguna otra solución que me puedas recomendar.gracias..