Plugin CKEditor - Strinsert
Strinsert est un petit plugin qui permet d'ajouter un menu déroulant dans la barre d'outil de CKEditor. Il peu-être très utile pour l'insertion de chaîne de caractère préformatée, à l'endroit désiré d'un article. Utile dans mon cas pour l'ajout d'un saut de page que je veux ajouter ou je veux et sans devoir me taper tout le code HTML à chaque fois. Voir l'article sur la mise en page d'une page web avant impression.
Pour cela, il suffit d'installer le plugin sur le serveur, et de l'activer via l'interface administrateur PluxmlPluginsCKEDitorConfiguration.
Attention aux dépendances des plugins. Ici le plugin Rich Combo est requis en dépendance de strinsert.
Ensuite, il ne reste plus qu'à mettre les mains dans le code pour la configuration du menu déroulant. Pour cela il suffit d'éditer le fichier plugin.js du plugin strinsert, et d'ajouter les options voulues. Pour l'exemple, on ajoutera l'option ''saut de page'' et ''mail'' formatée en HTML. En rouge das la partie code sont les parties éditées.
- <p style="page-break-after:always;"></p>
- <a href="mailto:angeraph@free.fr">angeraph@free.fr</a>
Ce qui donnera:
Code
Fichier à éditer : <votre pluXML>pluginsckeditorckeditorpluginsstrinsertplugin.js
CKEDITOR.plugins.add('strinsert',
{
requires : ['richcombo'],
init : function( editor )
{
// array of strings to choose from that'll be inserted into the editor
var strings = [];
strings.push(['<p style="page-break-after:always;"></p>', 'Break Page', 'Break Page']);
strings.push(['<a href="mailto:angeraph@free.fr">angeraph@free.fr</a>', 'Mail: Angeraph', 'Mail: Angeraph']);
// add the menu to the editor
editor.ui.addRichCombo('strinsert',
{
label: 'Insérer',
title: 'Insérer',
voiceLabel: 'Insérer',
className: 'cke_format',
multiSelect:false,
panel:
{
css: [ editor.config.contentsCss, CKEDITOR.skin.getPath('editor') ],
voiceLabel: editor.lang.panelVoiceLabel
},
init: function()
{
this.startGroup( "Code HTML" );
for (var i in strings)
{
this.add(strings[i][0], strings[i][1], strings[i][2]);
}
},
onClick: function( value )
{
editor.focus();
editor.fire( 'saveSnapshot' );
editor.insertHtml(value);
editor.fire( 'saveSnapshot' );
}
});
}
})