##### 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 ``

``, 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`` !

.. tip:: ``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.

.. only:: html

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`_ :

.. only:: latex

.. image:: tinymce/1.png

.. only:: latex

.. note:: Le site officiel de TinyMCE (http://tinymce.com) vous donnera de plus amples informations sur cet éditeur de texte.
  
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`` :

.. image:: tinymce/2.png
  :height: 10000 px
  :width: 800 px
  :scale: 60 %

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

Préparation
*****

.. only:: html

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`` :

.. only:: latex

Pour vous simplifier la tâche, vous pouvez télécharger un dossier compressé contenant ``TinyMCE`` à l'aide du lien suivant : http://j.mp/1pNJ4Ok. Il suffit de glisser son contenu dans le dossier ``static/tinymce`` :

.. only:: html

.. code-block:: tree
    :emphasize-lines: 9

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

.. only:: latex

.. code-block:: sh
    :emphasize-lines: 9

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

.. captionup:: ./static/js/general.js
.. code-block:: javascript

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()`` :

.. code-block:: html

Pour récupérer le texte tapé dans ``TinyMCE``, nous exécutons la fonction suivante : .. code-block:: javascript 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()`` : .. code-block:: javascript var id_tinymce = '...': tinyMCE.get(id_tinymce).setContent('un peu de texte'); .. liens .. _TinyMCE: https://www.tinymce.com .. _ce lien: http://tutoriel-forum.s3-website-eu-west-1.amazonaws.com/tinymce.zip