Éditeur HTML wysiwyg

Lorsque l'utilisateur est invité à entrer du texte sur une page Web, il peut être intéressant de lui permettre de formater ce texte. Par exemple, si le site permet à un usager préautorisé de modifier en ligne le contenu d'une page, il lui faudra plus qu'une simple boîte d'édition pour qu'il puisse utiliser les différentes fonctionnalités offertes par les balises HTML. Il devra pouvoir identifier du texte comme étant le titre de niveau 1 (balise <h1>), il devra pouvoir ajouter des images, des liens, etc.

▼Publicité

Généralement, les éditeurs HTML contiennent une série de boutons pour formater le texte et présentent le texte formaté tel qu'il apparaîtra dans la page Web (wysiwyg : What You See Is What You Get). Certains offrent également la possibilité de travailler directement en HTML. Ceci peut être utile lorsqu'on désire utiliser une balise non offerte par l'éditeur ou encore pour mieux gérer les listes imbriquées ou les tableaux.

Voici un exemple d'éditeur HTML sur un site Web en ligne :

Exemple éditeur HTML

Éditeur HTML gratuit : TinyMCE

Mise à jour

Cette section a été révisée et améliorée en février 2015.

TinyMCE est un éditeur HTML tout à fait gratuit. Depuis quelques années, il a été grandement amélioré et son installation est beaucoup plus facile que par le passé.

TinyMCE permet d'ajouter différentes barres d'outils à une zone de texte. Les boutons de ces barres d'outils sont paramétrables. 

Voici un exemple de zone de texte avec TinyMCE :

Exemple TinyMCE

Installation de TinyMCE

  • Pour télécharger TinyMCE, rendez-vous sur le site http://www.tinymce.com. Le menu « Download » vous permet de récupérer la version qui convient à vos besoins. 
    • Le « Main package » de base contient tout ce qu'il vous faut pour utiliser TinyMCE. 
    • La version avec jQuery contient, en plus, une intégration de fonctions jQuery intéressantes avec, notamment, un meilleur contrôle sur les boîtes de textes qui doivent utiliser TinyMCE. 
    • La version avec « development package » vous permet, en plus, de modifier le code source de TinyMCE pour répondre à un besoin particulier.
    • Les instructions suivantes s'appliquent au « Main package » avec jQuery.
  • Décompressez le fichier à l'endroit de votre choix.
  • Copiez à la racine de votre site Web le dossier js. La structure de votre site ressemblera à celle-ci. Vous pouvez supprimer le fichier license.txt.

    Dans un projet PHP Dans un projet ASP.NET
    Structure des dossiers avec TinyMCE sous PHP Structure des dossiers avec TinyMCE sous ASP.NET
  • Pour utiliser TinyMCE, vous devez ajouter du code JavaScript dans les pages qui utiliseront TinyMCE. Vous aurez d'abord besoin d'une balise <script> qui pointe vers le fichier tinymce.min.js. Ajustez le chemin pour retrouver le fichier tinymce.min.js.
    HTML

    <script src="chemin/tinymce/tinymce.min.js"></script>

  • Si vous utilisez la version de TinyMCE utilisant jQuery, vous devez vous assurer que jQuery soit chargé AVANT le fichier tinymce.min.js. À vous de récupérer les fichiers jQuery requis ou encore d'utiliser la version CDN.
    HTML

    <script src="js/jquery.js"></script>

  • Vous aurez aussi besoin d'un script pour configurer TinyMCE. Vous trouverez des exemples d'utilisation sur le site de TinyMCE. La version « Advanced » est la plus intéressante. Dans le code JavaScript, ajustez les options de TinyMCE pour répondre à vos besoins :
    • Ajustez le sélecteur css qui indiquera sur quel contrôle TinyMCE doit être utilisé. Par défaut, tous les textarea seront affectés (ex : selector: "textarea"). Il est préférable d'affecter une classe aux contrôles désirés (ex : selector: ".tinymce"). 
    • Ajustez le nom de la feuille de style à utiliser. Vous pouvez utiliser la même feuille de style que pour votre site. Il est cependant fréquent que des technicalités nous obligent à créer une seconde feuille de style pour l'éditeur HTML.
    • Au besoin, ajustez le JavaScript pour obtenir les boutons désirés dans la barre d'outils.
    • Si vous ne spécifiez aucune largeur, l'éditeur prendra toute la largeur disponible. 
  • Dans votre page Web, ajoutez une boîte d'édition multilignes (contrôle HTML <textarea>). Pour que la boîte d'édition utilise TinyMCE, ajoutez-lui une classe correspondant à celle précisée comme sélecteur. 

    Ex :

    HTML

    <textarea id="commentaire" name="commentaire" class="tinymce"></textarea>

    Si vous travaillez avec ASP.NET, un contrôle <asp:TextBox> avec l'attribut TextMode="MultiLine" générera un textarea :

    Fichier .aspx (ASP.NET)

    <asp:TextBox runat="server" ID="textBoxCommentaire" TextMode="MultiLine" CssClass="tinymce" />

  • Ajustez votre code pour que le contrôle contienne, dès l'affichage initial, les données à modifier. 
  • Prévoyez un bouton Enregistrer qui lancera  une requête SQL pour mettre à jour les données puis affichera la page ainsi modifiée.
  • Prévoyez également un bouton Annuler qui laissera les données inchangées dans la BD puis affichera la page originale.

Consulter le code HTML d'une page Web

Les éditeurs HTML WYSIWYG permettent généralement de travailler en mode visuel ou en mode HTML. TinyMCE n'est pas en reste. Cependant, alors qu'on retrouve généralement un bouton ou une option de menu « HTML », TinyMCE vous offre cette possibilité dans le menu Tools / Source code.

Menu Source code de TinyMCE

Utiliser nos propres classes CSS dans TinyMCE

TinyMCE est hautement configurable. Parmi les configurations les plus appréciées, notons la possibilité d'ajouter nos propres classes CSS dans la liste déroulante des formats. 

Dans l'exemple suivant, nous ajoutons le style "important" à la liste déroulante. Ceci ajoutera les balises <span class="important">...</span> alentour du texte sélectionné.

HTML

<script>

    tinymce.init({

        ..., 

        style_formats: [

            ...,

            { title: 'Important', inline: 'span', classes: 'important' },

            ...

        ],        

        ...

    });

</script>

Style personnalisé dans la liste déroulante

Forcer le chargement de la feuille de style modifiée

Lorsqu'une zone d'édition utilise TinyMCE, la feuille de style que TinyMCE utilise est mise en cache. Il s'agit du même comportement que pour toute feuille de style chargée par un navigateur.

Le problème avec la feuille de style de TinyCME, c'est qu'il n'est pas possible d'appuyer sur F5 pour la recharger après l'avoir modifiée. Pour contourner ce problème, on peut utiliser la technique du paramètre de version de la feuille de style.

Il s'agit d'ajouter un paramètre après le nom de la feuille de style. Ce paramètre ne changera rien à la feuille de style mais lorsqu'on modifiera sa valeur, le navigateur croira que la version en cache de la feuille de style n'est pas la même que celle demandée par le site Web puisque son nom complet, incluant le paramètre, ne sera pas identique.

Donc, après avoir apporté une modification a la feuille de style, vous n'aurez qu'à changer le numéro de version afin que TinyMCE tienne immédiatement compte des modifications.

Ex :

HTML

<script>

    tinymce.init({

        ..., 

        content_css: "css/editeur.css?ver=1.2",

        ...

    });

</script>

Pour plus d'information

« TinyMCE:Installation ». TinyMCE. http://wiki.moxiecode.com/index.php/TinyMCE:Installation

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories

2 commentaires

    • Christiane Lagacé

      Vous avez bien raison. Et en plus, ses développeurs continuent de l’améliorer de jour en jour.

      Merci de vous intéresser à mon blogue !

      Christiane