TinyMCE¶

Présentation¶

Pour écrire les messages du forum, nous avons besoin d’un éditeur de texte. Bien sûr, nous pourrions nous contenter d’une simple <textarea>, mais avec ceci, l’utilisateur ne pourrait pas formater son texte. Les retours à la ligne, les puces, le texte en couleur et le changement de la taille de la police d’écriture seraient presque impossibles.

Note

Il serait possible de réaliser ces opérations, mais seulement en entrant du HTML pur, qui n’est pas forcément à la portée de tout le monde. En outre, il faudrait faire une vérification rigoureuse du code HTML pour éviter des injections javascript (avec des balises <script>).

Comment faire alors pour que l’utilisateur puisse formater son texte de manière intuitive sans devoir connaître la syntaxe HTML ?

En utilisant un WYSIWYG !

Astuce

WYSIWYG est l’abréviation de “What you see is what you get”. Ce terme est utilisé pour désigner tout éditeur sur lequel le fond et la forme sont confondus. Il s’agit d’une catégorie de logiciels qui donnent à l’utilisateur l’impression de voir son document tel qu’il sera publié. Par exemple, Microsoft Word en est un. Mais l’utilisation d’un WYSIWYG n’est de loin pas la seule manière d’écrire du texte. Le HTML, le markdown ou encore le LateX sont tous des langages avec lesquels la forme et le fond ne sont pas confondus.

Un WYSIWYG a l’avantage d’être intuitif (lorsqu’il est bien réalisé). Ce dernier n’a, en effet, pas à apprendre une syntaxe spécifique pour éditer son texte, il clique juste sur des boutons qui le formatent pour lui.

Bien sûr, nous pourrions créer un éditeur de texte en javascript, mais cela serait si complexe à réaliser qu’une telle entreprise mériterait à elle seule un tutoriel complet. Nous allons donc nous tourner vers un WYSIWYG pour le web déjà existant, TinyMCE :

Cet éditeur pour pages web est en fait une “textarea améliorée”, qui donne accès à de nombreuses fonctions d’éditions de texte et des plug-in. Pour notre application, nous utiliserons en grande partie des fonctions déjà existantes dans TinyMCE, en ajoutant un plug-in pour écrire des équations mathématiques, eqneditor :

Important

eqneditor est un plug-in normalement payant, alors vous devez l’acheter si vous utilisez cette application de manière publique.

Préparation¶

Pour vous simplifier la tâche, vous pouvez télécharger un dossier compressé contenant TinyMCE en cliquant sur ce lien. Il suffit de son contenu dans le dossier static/tinymce :

.
└── static
    ├── avatar.png
    ├── avatars.zip
    ├── avatars_grands
    ├── avatars_petits
    ├── bootstrap
    ├── js
    └── tinymce
        ├── langs
        ├── licence.txt
        ├── plugins
        ├── skins
        ├── themes
        └── tinymce.min.js

A présent, nous allons ajouter dans general.js une fonction, init_editeur(), qui permet de lancer TinyMCE :

./static/js/general.js

function init_editeur(id_editeur) {
  var tinymce_toolbar =
  // précédent/suivant
  'undo redo |' +
  // éditeur d'équations
  'n eqneditor |' +
  // gras/italique/souligné
  'n bold italic underline |' +
  // alignement
  'n alignleft aligncenter alignright alignjustify |' +
  // listes (nombres, puces), indentation des listes
  'n bullist numlist outdent indent |' +
  // insertion d'images/liens/code HTML (par exemple : balise <iframe> youtube)
  'n image link code |' +
  // couleurs du texte/surlignage/ emojis
  'n forecolor backcolor emoticons';
  var tinymce_plugins = 'eqneditor textcolor image code emoticons';
  tinyMCE.init({
    selector: '#'+id_editeur,
    plugins: tinymce_plugins,
    toolbar: tinymce_toolbar,
    language: "fr_FR"
  });
}

Note

Les n présents au début de chaque séparation de TinyMCE permettent d’éviter un bug qui empêche certains boutons de s’afficher. La lettre n a été choisie totalement au hasard, vous pouvez utiliser n’importe quelle chaîne de caractères, pourvu que celle-ci ne corresponde pas à un plug-in ``TinyMCE.

Et maintenant nous appelons l’éditeur de texte en créant une textarea avec un attribut id, puis en appelant la fonction init_editeur() :

<textarea id="editeur_de_texte"></textarea>
<script>
  init_editeur('editeur_de_texte');
</script>

Pour récupérer le texte tapé dans TinyMCE, nous exécutons la fonction suivante :

var id_tinymce = '...';
tinyMCE.get(id_tinymce).getContent();

Dans celle-ci, id_tinymce équivaut à l’attribut id de la textarea sur laquelle a été créé l’éditeur de texte.

De même, nous pouvons modifier le contenu de l’éditeur à l’aide de la fonction setContent() :

var id_tinymce = '...':
tinyMCE.get(id_tinymce).setContent('un peu de texte');