[Editeur Texte Riche] Ajouter un élément personnalisé dans la barre d'outil

Ce tutoriel illustre une des possibilités d'enrichissement de l'éditeur texte riche proposées depuis JPlatform 10,  expliquée en détails dans la fiche  JPlatform 10 - Documentation - Personnalisation de l'éditeur Wysiwyg, section Configuration de l'éditeur.

Création du plugin TinyMCE

On crée un plugin TinyMCE (enregistré sous l'identifiant wordcounter) qui ajoute la disponibilité d'un bouton (identifiant countword) pour compter le nombre de mot de la séléction en cours.

Quelques particularités spécifiques à JPlatform de cette implémentation de plugin TinyMCE : 

  • les libellés et messages sont internationalisées : ils sons déclarés dans les fichiers propriétés de JPlatform et sont accessibles automatique via les APIs standard de TinyMCE
  • l'icone du bouton est déclarée à partir d'un identifiant de fonticon disponibles dans JPlatform (parmis Glyphicon, Icomoon, ...)

Toutes les autres APIs utilisées sont celles disponibles en standard dans TinyMCE : https://www.tinymce.com/docs/

Fichier JavaScript principal du plugin : 
plugins/DemoWysiwygPlugin/wysiwyg/plugins/wordcounter/plugin.js

!function($) {
  tinymce.PluginManager.add('wordcounter', function(editor, url) {

    
    // Register the button so it can be declared in the toolbar configuration
    editor.addButton('countword', {
      tooltip : 'wordcounter.btn.tooltip', // I18N property name, declared in en.prop/fr.prop without the "wysiwyg.plugins." prefix     
      icon : 'icomoon icomoon-ruler', // Icon name from icon set available in JPlatform (Glyphicon, Icomoon, ...)
      
      // Action performed when button is clicked
      onclick : function() {

        // Count word in selection
        var selectedText = tinymce.activeEditor.selection.getContent({ format : 'text' });
        var wordCount = selectedText ? selectedText.split(' ').length : 0;

        // Display result as a TinyMCE notification
        editor.notificationManager.open({
          text : editor.translate(["wordcounter.message", wordCount]), // I18N property name, declared in en.prop/fr.prop without the "wysiwyg.plugins." prefix
          type : 'info',
          timeout: 5000
        });
      },
      
      // Enable the button only when text is selected, disabled by default
      disabled: true,      
      onPostRender : function() {
        var btn = this;
        editor.on('NodeChange', function(e) {
          btn.disabled(tinymce.activeEditor.selection.isCollapsed());
        });
      }
    });

    
  });
}(window.jQuery);

 

 Déclaration des propriétés de traduction pour l'affichage : 
WEB-INF/plugins/DemoWysiwygPlugin/properties/languages/en.prop

wysiwyg.plugins.wordcounter.btn.tooltip: Count words
wysiwyg.plugins.wordcounter.message: Number of words in current selection: {0}

WEB-INF/plugins/DemoWysiwygPlugin/properties/languages/fr.prop

wysiwyg.plugins.wordcounter.btn.tooltip: Compter les mots
wysiwyg.plugins.wordcounter.message: Nombre de mots dans la sélection : {0}

 

Déclaration du plugin TinyMCE en propriété : 
On déclare le fichier fichier javascript du plugin TinyMCE en propriété, afin qu'il puisse être injecté correctement lors de l'initialisation de l'éditeur.
WEB-INF/plugins/DemoWysiwygPlugin/properties/plugin.prop

wysiwyg.plugins.wordcounter: plugins/DemoWysiwygPlugin/wysiwyg/plugins/wordcounter/plugin.js

 

Modification des configurations d'éditeurs

On crée un fichier de configuration pour indiquer à JPlatform d'insérer notre plugin TinyMCE et son bouton dans la configurations "légère" des éditeur utilisés sur le site.

WEB-INF/plugins/DemoWysiwygPlugin/wysiwyg/configuration-wordcounter.conf

{
  'light': {
    plugins: '-wordcounter', /* Do not forget the leading '-' to ensure TinyMCE properly load the plugin */
    toolbar: 'countword'
  }
}​​

On déclare ce fichier de configuration additionnel  dans les propriétés de JPatform.
WEB-INF/plugins/DemoWysiwygPlugin/properties/plugin.prop

wysiwyg.additional.configuration.wordcounter: /WEB-INF/plugins/DemoWysiwygPlugin/wysiwyg/configuration-wordcounter.conf