Simple Code <code> CKEditor en Drupal

Dom, 18/11/2012 - 21:01 -- Remiguel

Tag <code> invisible en CKEditor

Si queremos usar el tag <code> En Drupal combinado con el modulo CKEditor, vemos que durante la edición en la ventana de CKEditor, no aparece el texto formateado. Eso es porque esta desactivado por defecto en ckeditor.config.js.

Tenemos que editar el fichero ckeditor.config.js en el directorio /drupal/sites/all/modules/ckeditor. Hay que añadir dos barras oblicuas // delante de la linea de código siguiente:

 // config.protectedSource.push(/<code>[\s\S]*?<\/code>/gi);

Opcionalmente podemos dar formato al tag <code> en el fichero css de nuestro tema drupal. Por ejemplo

code {
  font-family: monospace;
  font-style:italic;
  color: #AAAAAA;
}

Acceso directo a <code>

Quería tener un acceso directo para dar formado a códigos. Podemos usar el plugin ckeditor-syntaxhighlight-1.0.tar.bz2, es muy completo pero no me parecía adaptado a mi uso. También si habilitamos el icono "Style" en /admin/config/content/ckeditor/edit/[perfil] => mostrar apariencia del editor, tendremos una lista desplegable con el estilo "computer Code". Su uso es un poco largo.

He creado un pequeño plugin "Simple Code (scode)" para tener un acceso directo a este tag. Leyendo un poco la documentación siguiendo algunos tutoriales aqui y aprovechando del código de Nikolay Ulyanitsky

El plugin se compone de un fichero Java, un icono (opcionalmente en una carpeta), todo en una carpeta con el mismo nombre del plugin. Los plugins CKeditor se graban  en /drupal/sites/all/modules/ckeditor/plugins.

Código del fichero js:

 

/**
 * Basic sample plugin inserting <code> into CKEditor editing area.
 */
CKEDITOR.plugins.add( 'scode',
{
init: function( editor )
{
editor.addCommand( 'insertcode',
{
   exec : function( editor )
{  
   var format = {element : "code"};
   var style = new CKEDITOR.style(format);
   style.apply(editor.document);
   }
} );
editor.ui.addButton( 'Button',
{
label: 'Insert Code',
command: 'insertcode',
icon: this.path + 'images/icon.png'
} );
}
} );
 
Este código funciona con CKeditor 3.6.3 y Drupal 7. Se puede aprovechar para cualquier tag.
Una vez subido el plugin al servidor, tenemos que activarlo en /admin/config/content/ckeditor/edit/[perfil] => "mostrar apariencia del editor"
 
Ahora tenemos un icono nuevo para dar formato el texto con el tag <code> en la barra de herramientas.
 

 

Adjunto(s): 
Icono de paquete scode.zip