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'} );}} );
