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

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

   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