miércoles, 6 de agosto de 2014

TinyMCE en Codeigniter

Posted by daycry at 9:24 Labels: , , , , , , ,
En este post vamos a ver como integrar nuestro Editor TinyMCE en nuestro TextArea.
Este editor permite almacenar en formato html el contenido de nuestro textarea, de forma que quede con un estilo mucho mas atractivo al pintarlo por pantalla, y no quede como un texto llano.

Lo primero que hay que hacer es descargar las librerías de la página oficial:
Descargar

Una vez descargamos, el conjunto de archivos los podemos dejar en una carpeta en el root de Codeigniter, de esa forma si desarrollamos otra aplicación podremos acceder a estos ficheros sin necesidad de volverlos a poner en la nueva aplicación.

La dirección donde dejaría los archivos es la siguiente:

<?php echo base_url();?>public/tinymce/tinymce.min.js

Que sería en:

http://localhost/nombreProyecto/public/tinymce/

Dentro de esa carpeta estarían todos los ficheros que descargamos de la página.

Como Utilizar el plugin

Para poder utilizar el plugin en nuestra aplicación de Codeigniter, simplemente deberíamos incluir en la vista que queramos que aparezca, dicha librería.
Como por ejemplo el código PHP mostrado anterior, esta ruta puede cambiar dependiendo de donde estén ubicados los ficheros dentro del servidor.

<script src='<?php echo base_url();?>public/tinymce/tinymce.min.js'></script>

Ejemplo de Vista en Codeigniter


<!DOCTYPE HTML>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="daycryweb.blogspot.com" />
    <title>TinyMCE en Codeigniter</title>
 
    <script type="text/javascript" src="<?php echo base_url();?>public/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
    tinymce.init({
        selector: "textarea"
     });
    </script>
 
</head>
 
<body>
     
    <form method="post">
        <textarea id="mensaje"></textarea>
    </form>
 
</body>
</html>

Con el ejemplo anterior, le estamos indicando que todos los campos de texto del tipo "TextArea", tendrán las características que incluye el plugin.

Existen bastantes configuraciones para el plugin, incluso se pueden incluir otros plugins dentro de las librerías TinyMCE, por ese motivo os voy a dejar la url donde podréis encontrar varios ejemplos de configuraciones mas avanzadas.

Configuraciones avanzadas


No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )