Modificar estilos en la toolbar del CKEditor en Drupal

Después de haber adoptado el CKEditor como editor WYSIWYG en Drupal me ví con la necesidad de personalizar algunas opciones cuando hacía algunas pruebas para analisisdecoyuntura.com.ar

Algunos artículos tienen como introducción una cita referida al tema que se trata. La cita es una caja con un ancho del 50% del contenido alineado a la derecha con texto alineado también a la derecha. Para que la edición sea simple, agregué en el toolbar "DrupalFiltered" la opción de elegir estilos.

El archivo que hay que modificar es: modules/ckeditor/ckeditor.config.js. Basta agregar "Styles" a la toolbar que ya estoy usando.

config.toolbar_DrupalFiltered = [
    ['Source'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
    ['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
    ['Maximize', 'ShowBlocks'],
    '/',
    ['Format'],
    ['Styles'],
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','LinkToNode', 'LinkToMenu'],
    //['DrupalBreak', 'DrupalPageBreak']
   ];

Luego hay que indicarle al CKEditor donde tiene que buscar sus estilos. Esto se hace en /admin/settings/ckeditor/edit/Advanced (si es que Advanced es el perfil que usamos) y en CSS/Predefined styles path colocamos %t/ckeditor.styles.js (%t es la ruta de nuestro tema). Este archivo se puede copiar del directorio del modulo para luego modificarlo con el estilo para las citas

/*
$Id: ckeditor.styles.js,v 1.1.2.2 2009/12/16 11:32:04 wwalc Exp $
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

/*
 * This file is used/requested by the 'Styles' button.
 * 'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.
 */

CKEDITOR.addStylesSet( 'drupal',
[
	/* Block Styles */

	// These styles are already available in the "Format" combo, so they are
	// not needed here by default. You may enable them to avoid placing the
	// "Format" combo in the toolbar, maintaining the same features.
	/*
	{ name : 'Paragraph'		, element : 'p' },
	{ name : 'Heading 1'		, element : 'h1' },
	{ name : 'Heading 2'		, element : 'h2' },
	{ name : 'Heading 3'		, element : 'h3' },
	{ name : 'Heading 4'		, element : 'h4' },
	{ name : 'Heading 5'		, element : 'h5' },
	{ name : 'Heading 6'		, element : 'h6' },
	{ name : 'Preformatted Text', element : 'pre' },
	{ name : 'Address'			, element : 'address' },
	*/

	/* Inline Styles */

	// These are core styles available as toolbar buttons. You may opt enabling
	// some of them in the Styles combo, removing them from the toolbar.
	/*
	{ name : 'Strong'			, element : 'strong', overrides : 'b' },
	{ name : 'Emphasis'			, element : 'em'	, overrides : 'i' },
	{ name : 'Underline'		, element : 'u' },
	{ name : 'Strikethrough'	, element : 'strike' },
	{ name : 'Subscript'		, element : 'sub' },
	{ name : 'Superscript'		, element : 'sup' },
	*/

	{ name : 'Quote'		, element : 'div', attributes : { 'class' : 'quote' } },

]);

Por último, hay que agregar en la hoja de estilos del tema, las definiciones de la class quote

div.quote {
	width: 50%;
	margin: 0 0 3em 50%;
	line-height: 1.8em;
	text-align: right;
	font-size: 120%;	
	color: #666;
	font-family: arial, verdana;
}
div.quote p {
	line-height: 1.8em;
	margin: 0;
	padding: 0; 
}