Posts Tagged ‘JavaScript’

noviembre 18, 2009 18

Tutorial de CKEditor. Parte II.

By in JavaScript, Librerías

En la primera parte del tutorial vimos las distintas formas de configurar CKEditor. Hoy vamos a ver como configurar la barra de herramientas.

Para configurar la barra de herramientas tenemos dos formas:

  • Asignar a la propiedad toolbar una definición de la barra de herramientas.
  • Crear una propiedad toolbar_name con la definición de la barra de herramientas y posteriormente asignar a la propiedad toolbar el literal ‘name’.

Vamos a ver un ejemplo, con el segundo método, de creación de una barra de herramientas:

config.toolbar = 'Full';

config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

Con esto definimos una barra de herramientas muy completa. Como vemos la barra de herramientas es un array donde cada elemento es o bien un array o bien el literal ‘/’. Si el elemento es un array cada elemento es un botón. Si en lugar de un array nos encontramos con el carácter ‘/’ este fuerza un salto en la barra de herramientas, es decir nos crea una nueva barra debajo de la anterior.

Dentro de la definición de cada uno de los bloques de botones podemos encontrar el identificador de cada uno de los botones o el carácter ‘-‘ que nos crea un espacio en blanco.

La definición de la barra de herramientas debe ir en el archivo de configuración, o bien en el por defecto o en uno propio, explicado en el artículo anterior.

Podemos si lo queremos crear la barra de herramientas al crear la instancia de esta forma:

CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });

Como se puede ver es bastante sencillo configurar la barra de herramientas a nuestro gusto. Si teneis alguna duda intentaré resolverla en los comentarios.

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

Tags: , , , ,

noviembre 16, 2009 4

Tutorial de CKEditor. Parte I.

By in JavaScript, Librerías

Hace ya bastante tiempo se comenzó en este blog un tutorial sobre FCKEditor, uno de los muchos editores WYSIWYG que hay, pero se dejó abandonado. Varias fueron las razones, principalmente la falta de tiempo y la salida de CKEditor.

Después de un tiempo en el tintero, y gracias a un comentario de un lector, me he decidido a comenzar un tutorial introductorio a CKEditor. Puede servirnos como introducción el artículo “Probando CKEditor” donde se da un vistazo rápido a esta herramienta.

Lo primero que vamos a ver es como configurar nuestro editor. Para ello tenemos tres opciones:

  • Definir la configuración al crear el editor.
  • Usar el archivo config.js para colocar la configuración en este.
  • Crear nuestro propio archivo de configuración.

Definir la configuración al crear el editor:

Cuando creamos una instancia del editor con el método replace podemos indicarle la configuración de este. De esta forma nos evitamos tener que tocar la instalación del editor. Veamos como se haría:

CKEDITOR.replace( 'editor1',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

Hay que tener en cuenta que lo que se pasa a la función es la definición literal de un objeto, por lo que tendremos que usar la sintaxis parametro : valor, y tener cuidado de no usar el símbolo “igual que” (=).

Usar el archivo config.js para colocar la configuración:

Si editamos el archivo config.js, en la misma carpeta donde está ckeditor.js, veremos que hay una función llamada CKEDITOR.editorConfig. Dentro de esta tendremos que colocar los valores de configuración que deseemos.

CKEDITOR.editorConfig = function( config )
{
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};

Definir la configuración en nuestro propio archivo:

En este caso nos crearemos un archivo donde colocaremos la configuración. De esta forma no tenemos que modificar la instalación de CKEditor y támpoco tendremos que tocar nuestras páginas, tan solo el archivo de configuración. Dentro de él definiremos la función CKEDITOR.editorConfig, podemos por ejemplo copiar el config.js como base, y luego indicaremos al editor donde se encuentra este archivo de la siguiente manera:

CKEDITOR.replace( 'editor1',
    {
        customConfig : '/custom/ckeditor_config.js'
    });

Conclusiones:

Como hemos podido ver el editor nos ofrece varias formas para configurarlo, dependiendo de nuestras necesidades o nuestros gustos. Personalmente me gusta más la tercera, aunque cada cual es libre de hacerlo a su manera.

Espero que esta primera parte les haya sido de ayuda pues esta es la base para customizar nuestro editor. Hasta la próxima entrega del tutorial, que espero pueda tenerla lista para el miércoles.

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

Tags: , , , ,

noviembre 12, 2009 0

Mejorando el rendimiento de JavaScript

By in JavaScript

Via anieto2k me encuentro con una presentación de Thomas Fuch, creador de Script.aculo.ous, llamada “Extreme JavaScript Performance”, donde da una serie de recomendaciones, que podemos y que no debemos,  para mejorar el rendimiento de nuestros scripts.

En la presentación se comparan los tiempos que se tarda, en distintos navegadores, en realizar diversas tareas comunes. También se presentan algunas curiosidades del lenguaje, como la evaluación de los operadores && (AND) y || (OR).  Una lectura más que recomendada para mejorar el tiempo de ejecución de los scripts.

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

Tags: , ,

octubre 19, 2009 0

JavaScript Framework Matrix: Comparativa de los diferentes frameworks JavaScript

By in Herramientas, JavaScript

JavaScript Framework Matrix es una aplicación que nos permite visualizar una comparativa de los distintos frameworks JavaScript.

JavaScript Framework Matrix

JavaScript Framework Matrix

Aunque no ejecuta si que nos muestra las distintas formas de usar cada una de las funcionalidades de los frameworks que aparecen. Es una original forma de ver que framework nos resulta más útil, o nos es más conveniente,  en cada momento.

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

Tags: , ,

septiembre 30, 2009 8

Probando CKEditor

By in JavaScript, Librerías

Hace no mucho hablamos en este blog de la nueva versión de FCKEditor, llamada ahora CKEditor. Hoy toca probar muy por encima, en otras entradas se verá con mayor profundidad, este editor WYSIWYG.

Lo primero que tenemos que hacer es incluir el script de CKEditor:

<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>

Como se puede ver tenemos CKEditor dentro de una carpeta con el mismo nombre. Acto seguido, en alguna parte de la página, tendremos que tener un textarea de la siguiente forma:

<textarea name="editor">Esto es un ejemplo de CKEditor</textarea>

Ahora tenemos dos opciones, veamos la primera:

<script type="text/javascript">
CKEDITOR.replace('editor');
</script>

Si optamos por esta opción tendremos que poner el código en cualquier parte de la página, pero siempre después de la definición del textarea que será nuestro editor.
Si queremos colocar el código, que crea el editor, en el head de la página podemos optar por esta otra opción:

<script type="text/javascript">
window.onload = function()
{
    CKEDITOR.replace('editor');
}
</script>

Para que de esta forma se espere a que cargue la página para crear el editor. Podemos ver una demo en la siguiente página:

Demo de CKEditor.

Aquí termina este primer acercamiento a este, más que interesante, editor.

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

Tags: , , ,