junio 6, 2010 15

Tutorial de CKEditor. Parte IV.

By in JavaScript, Librerías

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&oacute;n de la plantilla 1.',
      html:
        '<h2>Pantilla 1</h2>' +
        '<p>Inserte el texto aqu&iacute;.</p>'
    },
    {
      title: 'Plantilla 2',
      html:
      '<h3>Plantilla 2</h3>' +
      '<p>Inserte el texto aqu&iacute;.</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,

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

15 Responses to “Tutorial de CKEditor. Parte IV.”

  1. Carlos dice:

    Gracias! me vino muy bien este resumen.

  2. iMad dice:

    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.

  3. JosueB dice:

    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.

  4. 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.

  5. andres henao dice:

    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

  6. 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.

  7. Isabel dice:

    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??

  8. Isabel, necesitaría algo más de información, o ver parte del código.

  9. Isabel dice:

    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.

  10. albert dice:

    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!

  11. josue dice:

    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

  12. David’s Tech Blog…

    […]below you’ll find the link to some sites that we think you should visit[…]…

  13. ronald dice:

    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..

  14. Luis dice:

    Hola amigo que tal. Estoy traytando de integrar el ckeditor (4) en mi proyecto web para que guarde la info en una base de datos Mysql, y la verdad es que funciona muy bien, el unico detalle es que cuando abro la pagina para editar el contenido de la bd este no se carga en el ckeditor.en el textarea tengo esto:  <textarea cols=’80’ id=’Detalles’ name=’Detalles’ rows=’10’></textarea><script type=’text/javascript’>CKEDITOR.replace(‘Detalles’);</script> ¿serias tan amable de contarme donde estoy cometiendo el error?Saludos y gracias.

  15. rick dice:

    Hola amigo, tengo implementadpo en mi projecto CKEditor para guardar áginas en la BD, es un blog por asi decirlo, pero en la parte de modificar el blog del usuario, cuando recupero los datos del blog, en la parte del contenido me carga la informacion de la base, pero sin nada de formato, sin etiquetas, puro texto plano y junto, en si desace todo el html y pierde el formato, que puedo hacer ahy? D:

Leave a Reply