Lors de la Journée Moodle.UQ 2025, j’ai eu le plaisir de présenter « Bonifier TinyMCE : Se familiariser avec TinyMCE et ses possibilités de bonification dans Moodle ».
Dans cet article, je vous partage les grandes lignes de ma présentation : un survol de TinyMCE, les façons de le personnaliser, et une brève introduction au développement d’extensions TinyMCE pour répondre à nos besoins spécifiques dans Moodle.
🧰 TinyMCE : L’outil HTML de prédilection de Moodle
TinyMCE est un éditeur WYSIWYG (« What You See Is What You Get ») qui permet aux utilisateurs de créer du contenu HTML sans toucher au code. Depuis son intégration à Moodle en 2006, il a connu plusieurs évolutions. Après une période où Atto, un éditeur maison, a pris le relais, TinyMCE est revenu en force avec avec Moodle 4.1.
Selon différentes sources, entre 200 000 et 300 000 sites web utiliseraient TinyMCE, ce qui représenterait environ 50 % du marché des éditeurs de texte enrichi.
Qu’est-ce qu’un éditeur HTML?
Selon Wikipedia, un éditeur HTML est « un logiciel conçu pour faciliter la préparation et la modification de documents écrits en Hypertext Markup Language (HTML) ». Deux types d’éditeurs HTML existent :
- Les éditeurs tel-tel (WYSIWYG) : Ils permettent de créer du contenu sans avoir à écrire de code HTML, en affichant le rendu final en temps réel.
- Les éditeurs de texte : Ils offrent une interface pour écrire du code HTML, souvent avec des fonctionnalités d’autocomplétion et de validation.
Comparaison avec Atto
À la base, TinyMCE offre les mêmes fonctionnalités qu’Atto. Lorsque des fonctionnalités spécifiques étaient nécessaires ou nécessitaient des ajustements pour bien s’intégrer à Moodle, elles ont été implémentées dans TinyMCE par l’équipe de développement de Moodle. On peut penser à la fonctionnalité d’insertion d’activités interactives H5P, à l’éditeur d’équations, ou encore au module de gestion des médias.
À savoir également que certaines fonctionnalités de TinyMCE ont été désactivées par défaut dans Moodle, mais peuvent être activées de nouveau en développant une extension personnalisée.
🔧 Comment bonifier TinyMCE : 4 approches
Tout dépendamment de vous besoins, il se peut que l’intégration de base de TinyMCE dans Moodle ne réponde pas entièrement à vos attentes. Que faire avec les fonctionnalités manquantes? Comment retirer les fonctionnalités inutiles? Comment ajouter des fonctionnalités avancées?
Voici quatre stratégies complémentaires vous permettront d’amener TinyMCE à un autre niveau :
1. Configurer TinyMCE
Des options de configuration sont disponibles pour personnaliser TinyMCE. Par exemple, vous pouvez activer à la pièce certaines extensions de TinyMCE, déterminer les éléments HTML autorisés à l’enregistrement, ou encore paramétrer l’enregistrement RecordRTC. Il est également possible de configurer l’éditeur d’équations intégré par Moodle.
2. Installer des extensions
Plusieurs extensions sont disponibles pour enrichir TinyMCE sur le répertoire d’extensions officiel de Moodle. D’autres sont également disponibles sur GitHub. Dans les deux cas, ces extensions peuvent ajouter des fonctionnalités comme des boutons supplémentaires, des barres d’outils personnalisées, ou encore des intégrations avec d’autres outils.
3. Utiliser TinyMCE Premium
Une autre option est d’utiliser les fonctionnalités Premium de TinyMCE. En échange d’un abonnement qui vous donnera accès à une clé d’API, diverses fonctionnalités seront ajoutées à l’éditeur, ce qui pourrait grandement améliorer l’expérience de vos utilisateurs Moodle. Cependant, il faut garder à l’esprit que toutes les extensions Premium ne sont pas encore supportées dans Moodle et qu’elles sont progressivement intégrées à l’éditeur.
4. Développer une extension
Il est également possible de développer vos propres extensions pour TinyMCE dans Moodle. Cela peut être utile si vous avez des besoins spécifiques qui ne sont pas couverts par les options de configuration ou les extensions existantes. Le développement d’extensions pour TinyMCE dans Moodle suit une approche similaire à celle des autres plugins Moodle, mais il y a quelques particularités à prendre en compte.
Le développement d’extensions pour TinyMCE répond principalement à deux besoins :
Configurer TinyMCE
Lorsque les paramètres de configuration de TinyMCE disponibles dans Moodle, il est possible de créer une extension qui modifie la configuration de l’éditeur. Un exemple de développement d’extension de configuration est TinyMCE Formatting par Andrew Lyons, qui permet de réactiver certaines fonctionnalités de format de texte comme la couleur.
Ajouter une fonctionnalité
Si vous souhaitez ajouter une fonctionnalité qui n’est pas disponible dans TinyMCE, vous pouvez développer une extension qui ajoute un nouveau bouton dans la barre de menu (menu), dans la barre d’outils (toolbar), ou dans la barre d’outils rapide (quick toolbar).
🛠️ Conseils pour le développement d’extensions TinyMCE dans Moodle
Voici quelques conseils pour vous aider à développer des extensions TinyMCE dans Moodle.
Structure de base d’une extension TinyMCE
Les extensions TinyMCE dans Moodle sont principalement composées des fichiers JavaScript suivants :
plugin.js: Le fichier principal de l’extension, qui permet d’enregistrer l’extension auprès de l’éditeur.configuration.js: Ce fichier permet de modifier la configuration de TinyMCE, par exemple en ajoutant un bouton à la barre d’outils.options.js: Gestion des communications d’informations entre le serveur et l’éditeur, comme les paramètres de configuration ou les permissions utilisateur.commands.js: Permet de définir des commandes personnalisées pour l’éditeur, comme l’insertion de contenu ou la modification de styles.
D’autres fichiers peuvent également être nécessaires selon les fonctionnalités de l’extension :
plugininfo.php: Gestion des communications d’informations entre le serveur et l’éditeur, comme les paramètres de configuration ou les permissions utilisateur./pix: Dossier contenant les différentes images (ex. icônes) utilisées par l’extension.styles.css: Fichier CSS qui sera chargé par les ressources et activités Moodle.editor_styles.css: Fichier CSS qui sera chargé par l’éditeur TinyMCE.
À ce sujet, l’équipe de développement de Moodle a publié un guide de développement d’extensions TinyMCE qui détaille la structure des fichiers et les bonnes pratiques à suivre. Un webinaire portant sur le développement d’extensions TinyMCE dans Moodle est également disponible.
Utiliser MDLcode
MDLcode est un outil de développement qui permet de générer du code pour les plugins Moodle. Il peut être utilisé pour créer la structure de base d’une extension TinyMCE, en générant les fichiers nécessaires et en configurant les paramètres de base.
Utiliser les librairies JavaScript existantes dans Moodle
Moodle offre plusieurs librairies JavaScript qui peuvent être utilisées pour enrichir les extensions TinyMCE. Voici quelques-unes des plus utiles :
core/templates: Permet de générer du balisage HTML propre et accessible.core/notifications: Permet de gérer les notifications et les messages d’erreur dans l’éditeur.core/str: Permet de gérer les chaînes de caractères et les traductions.
Utilisation du Formatter de TinyMCE
Le Formatter de TinyMCE est un outil puissant qui permet de gérer les styles et les formats de texte dans l’éditeur. Il peut être utilisé pour appliquer des styles spécifiques à des éléments HTML.
Boîtes modales TinyMCE vs Moodle
Bien que TinyMCE propose ses propres boîtes modales, il peut être préférable d’utiliser les boîtes modales de Moodle (core_form/modalform) pour assurer une cohérence visuelle et fonctionnelle avec le reste de la plateforme. Cependant, dans certains cas, les boîtes modales de TinyMCE peuvent être plus adaptées, notamment pour des interactions spécifiques à l’éditeur.
Événements TinyMCE
TinyMCE offre plusieurs événements qui peuvent être utilisés pour interagir avec l’éditeur. Les deux événements clés permettant de bien gérer le contenu HTML sont setContent et getContent. Ces événements permettent de manipuler le contenu de l’éditeur avant son affichage en mode WYSIWYG ou avant son enregistrement dans la base de données.
Empêcher la modification de certains contenus dans l’éditeur
Dans certains cas, il peut être nécessaire d’empêcher la modification de certains contenus dans l’éditeur. Pour ce faire, vous pouvez utiliser l’attribut contenteditable="false" sur les éléments HTML que vous souhaitez protéger. Cela empêchera les utilisateurs de modifier ces éléments directement dans l’éditeur.
Gérer la pile Annuler/Rétablir
TinyMCE gère automatiquement la pile Annuler/Rétablir, mais il est important de s’assurer que les modifications apportées par votre extension sont correctement enregistrées dans cette pile. Pour ce faire, vous pouvez utiliser l’API UndoManager de TinyMCE pour enregistrer les modifications apportées par votre extension.
🎓 En conclusion
TinyMCE est bien plus qu’un simple éditeur de texte. Grâce à ses nombreuses options de personnalisation et à son intégration poussée dans Moodle, il est possible d’en faire un véritable levier pédagogique. Que vous soyez administrateur, enseignant ou développeur, je vous encourage à explorer ses possibilités pour enrichir vos contenus Moodle.
Cet article a été rédigé à l’aide de l’intelligence artificielle, principalement pour la mise en forme et la révision des contenus. Les idées et les conseils présentés sont le fruit de mon expérience personnelle et de mes recherches.