Simple Code <code> CKEditor avec Drupal

dim, 18/11/2012 - 22:50 -- Remiguel

Tag <code> invisible dans CKEditor

Si on veut utiliser le tag <code> dans Drupal, combiné au module CKEditor, on constate que pendant l'édition dans la fenêtre de CKEditor, le texte formaté par ce tag, est invisible. Il est désactivé, par défaut dans le fichier ckeditor.config.js.

Nous devons éditer le fichier ckeditor.config.js qui se trouve dans le répertoire /sites/all/modules/ckeditor. Pour activer le code, on ajoute deux slash // devant cette ligne:

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

En option on peut formater notre tag <code> dans le fichier de style css de notre theme. Par exemple:

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

Raccourcis <code>

Je voulais avoir un raccourcis (un bouton dans la barre d'outils) pour formater mes lignes de codes. On peut pour cela utiliser ce plugin ckeditor-syntaxhighlight-1.0.tar.bz2, très complet, mais il me semble pas adapté à mon utilisation. On peut aussi en activant l'icône "Style", dans  /admin/config/content/ckeditor/edit/[perfil] => "montrer apparence de l'éditeur", avoir une liste déroulante avec le style "computer Code". C'est pas tres pratique.

J'ai crée un petit plugin "Simple Code (scode)" pour avoir un raccourcis à ce tag. En lisant un peu cette documentation, en suivant les tutoriaux ici et en me basant sur le code de Nikolay Ulyanitsky.

Le plugin est constitué d'un fichier Java, d'un icône (dans un répertoire optionnel), le tout dans un répertoire du même nom que le plugin. Les plugins CKeditor s'enregistrent dans le répertoire /sites/all/modules/ckeditor/plugins.

Code du fichier 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'
} );
}
} );
 
Ce code fonctionne avec CKeditor 3.6.3 et Drupal 7. On peut parfaitement le modifier pour l'utiliser avec n'importe quel tag.
Une fois enregistrer le plugin sur le serveur, on doit  l'activer sur la page de Drupal /admin/config/content/ckeditor/edit/[perfil] => "montrer apparence de l'éditeur"
 
Normalement on devrait avoir un nouvel icône pour formater le texte avec notre tag <code>, dans la barre d'outils.
 

 

Piece(s) jointe(s): 

Ajouter un commentaire

Filtered HTML

  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Plain text

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
By submitting this form, you accept the Mollom privacy policy.