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.
Artículos relacionados:
