Comment ajouter un bouton d'insertion d'espace insécable ( ) dans votre Wysiwyg
Nous avons dernièrement eu la demande d'ajouter un bouton dans l'éditeur de texte. Celui-ci devait permettre l'insertion d'un espace insécable ( ) au contenu.
L'exemple qui suit fonctionne avec le Wysiwyg Ckeditor sur Drupal 7.
Vous devez d'abord créer un nouveau module. Voici l'arborescence désirée :
- modules
- custom
- kwd_nbsp
kwd_nbsp.info
kwd_nbsp.module- nbsp_plugin
plugin.js- images
nbsp.png
- images
- nbsp_plugin
- kwd_nbsp
- custom
kwd_nbsp.info
name = "Ckeditor nbsp plugin"
description = "Add a new button in the wysiwyg to insert a non-breaking space"
core = 7.x
kwd_nbsp.module
<?php
function kwd_nbsp_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'nbsp_plugin' => array(
'path' => drupal_get_path('module', 'kwd_nbsp') . '/nbsp_plugin',
'buttons' => array(
'nbsp_plugin_button' => t('Add a non-breaking space'),
),
'load' => TRUE,
),
);
break;
}}
plugin.js
(function($) {
CKEDITOR.plugins.add( 'nbsp_plugin', {
init: function( editor )
{
editor.addCommand( 'nbsp_command', {
exec : function( editor ) {
editor.insertHtml(' ');
}
});editor.ui.addButton( 'nbsp_plugin_button', {
label: 'Insert a non-breaking space',
command: 'nbsp_command',
icon: this.path + 'images/nbsp.png'
});editor.keystrokeHandler.keystrokes[CKEDITOR.SHIFT + 32 /* SPACE */] = 'nbsp_command';
}
});})(jQuery);
nbsp.png
Pour l'image, voici une proposition https://github.com/agenceamiral/ckeditor-nbsp-plugin/blob/master/images/nbsp.png.
Sinon, cela pourrait être nimporte quelle image d'une dimension de 16x16.
Une fois le module créé, activez votre nouveau module dans votresite.com/admin/modules.
Ensuite activez la nouvelle option dans le wysiwyg : votresite.com/admin/config/content/wysiwyg/profile/full_html/edit. Elle devrait s'appeler "Add a non-breaking space";
Et voilà :)
Sources :
https://github.com/agenceamiral/ckeditor-nbsp-plugin
https://www.drupal.org/node/1793710