Edición de «Nicedit en KumbiaPHP Framework»
De KumbiaPHP Framework Wiki
Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.
Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.
Revisión actual | Tu texto | ||
Línea 1: | Línea 1: | ||
Nicedit es una librería javascript que nos permite transformar nuestros '''<textarea>''' en robustos editores de texto con la cual podemos dar formato a nuestra información y poder almacenarla en la BD con dicho formato. | Nicedit es una librería javascript que nos permite transformar nuestros '''<textarea>''' en robustos editores de texto con la cual podemos dar formato a nuestra información y poder almacenarla en la BD con dicho formato. | ||
+ | Con este pequeño ejemplo vamos a ver como integrar esta librería a nuestros proyectos KumbiaPHP y transformar nuestros campos textarea en editores personalizables. | ||
− | + | Para esto crearemos un partial, haciendo reutilizable el componente en las vistas que lo necesitemos. | |
− | |||
+ | ''' | ||
== Instalación de la Librería == | == Instalación de la Librería == | ||
− | Primero tenemos que descargar la librería [http://nicedit.com/ Nicedit] y la copiamos en nuestro directorio '''app/public/javascript/''' (Recomendamos crear un directorio aparte para cada librería con el fin de no dejar tantos archivos dentro de la carpeta '''javascript/''' que nos complique la administración de nuestra app). | + | ''' |
+ | |||
+ | Primero tenemos que descargar la librería [http://nicedit.com/index.php Nicedit] y la copiamos en nuestro directorio '''app/public/javascript/''' (Recomendamos crear un directorio aparte para cada librería con el fin de no dejar tantos archivos dentro de la carpeta '''javascript/''' que nos complique la administración de nuestra app). | ||
+ | |||
+ | |||
+ | ''' | ||
+ | == El controlador == | ||
+ | ''' | ||
+ | Creamos el controlador nicedit_controller.php que carga la vista index.phtml | ||
+ | <source lang=php line> | ||
+ | <?php | ||
+ | class NiceditController extends ApplicationController{ | ||
+ | var $name = 'Nicedit'; | ||
+ | |||
+ | public function index(){} | ||
+ | } | ||
+ | ?> | ||
+ | </source> | ||
+ | |||
+ | |||
+ | ''' | ||
== La vista == | == La vista == | ||
+ | ''' | ||
− | + | En nuestra vista index.phtml colocamos el diseño de nuestro formulario junto con nuestro textarea o los que queramos colocar, para este ejemplo solo visualizamos un textarea y un titulo dentro de nuestra interfaz. | |
<source lang=php line> | <source lang=php line> | ||
Línea 21: | Línea 43: | ||
''' | ''' | ||
== El partial == | == El partial == | ||
+ | ''' | ||
− | Ahora si nuestro | + | Ahora si nuestro codigo. Veamos como incluimos la librería Nicedit mediante el helper javascript_include_tag. Luego usamos una función para definir la configuración que vamos a usar en ese partial, dentro podemos hacer los llamados a los demás metodos de la libraría y personalizar nuestro partial como lo necesitemos. Podemos revisar la [http://wiki.nicedit.com/ documentación] para ver como podemos personalizar nuestros editores de texto y agragar o quitar funcionalidades según sea el caso. |
− | + | <source lang=php line> | |
− | <source lang=php> | ||
<?php echo javascript_include_tag('nicedit/nicEdit'); ?> | <?php echo javascript_include_tag('nicedit/nicEdit'); ?> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
bkLib.onDomLoaded(function(){ | bkLib.onDomLoaded(function(){ | ||
nicEditors.allTextAreas( | nicEditors.allTextAreas( | ||
− | {buttonList : ['bold','italic','underline','ol','ul','subscript','superscript', | + | {buttonList : ['bold','italic','underline','ol','ul','subscript','superscript','strikethrough','fontFormat','hr','link','unlink','image','xhtml' ], |
− | 'strikethrough','fontFormat','hr','link','unlink','image','xhtml' ], | + | iconsPath : '<?php echo APP;?>/javascript/nicedit/nicEditorIcons.gif'}) |
− | iconsPath : '<?php echo | ||
}); | }); | ||
</script> | </script> | ||
</source> | </source> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |