TinyMCE est un éditeur HTML tout à fait gratuit. Il permet d'éditer du texte et d'ajouter des images, des tableaux, de la couleur et toute autre fonctionnalité HTML.
Il fonctionne autant en mode visuel (What You See Is What You Get - wysiwyg) qu'en mode HTML.
Il est possible de le configurer afin d'y ajouter différentes barres d'outils. Les boutons de ces barres d'outils sont paramétrables.
Je vous présente ici les instructions pour travailler avec la version 7 de TinyMCE. Il y aura possiblement quelques ajustements à apporter si vous travaillez avec une version différente.
Dans cette fiche :
Il est possible de travailler avec TinyMCE avec un lien CDN (en mode cloud) ou de télécharger son code directement dans notre application.
Les instructions sont indiquées sur leur site : http://www.tinymce.com.
Voici un résumé des étapes à suivre pour utiliser le mode cloud.
Sans cette clé (et l'étape suivante qui consiste à enregistrer vos domaines), l'éditeur affichera le message le message « This domain is not registered with Tiny Cloud. Please review your approved domains. » ou « The API key you have entered is invalid. Please review your API key here » ou encore « The domain is not supported by your API key. Please review your domain settings here. ».
Pour un site Web, vous aurez au moins deux domaines à enregistrer :
Pour indiquer à votre programme que vous désirez utiliser TinyMCE, vous devez entrer des balises <script> dans la zone <head> de chacune des pages qui utilisent TinyMCE.
Dans la première balise, il est important de bien inscrire votre clé d'accès à la place de la série de x. L'URL exact à utiliser avec votre enregistrement vous est fourni sur le site de TinyMCE dans la section .
N'oubliez pas l'attribut defer.
Attendez avant de copier cet extrait dans votre code. Je vous suggère des options intéressantes plus bas.
<script src="https://cdn.tiny.cloud/1/xxxxxxxxxxxxxxxxxxxxxxxxxx/tinymce/7/tinymce.min.js" referrerpolicy="origin" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
tinymce.init({
selector:'textarea' // voir plus loin pour des options plus intéressantes!
});
});
</script>
Dans cet extrait de code, on indique que chaque balise <textarea> sera convertie en éditeur visuel. Il ne vous reste qu'à ajouter une balise <textarea> sur la page désirée.
Dès le chargement de la page, le <textarea> prendra l'apparence suivante :
Si vous utilisez un découpage standard sur un site PHP vanille, différentes techniques sont à votre disposition pour insérer ces balises :
Par exemple, voici comment charger automatiquement TinyMCE sur la page une-page.php à l'aide de inclureJsPropreALaPageActuelle().
<script src="https://cdn.tiny.cloud/1/xxxxxxxxxxxxxxxxxxxxxxxxxx/tinymce/7/tinymce.min.js" referrerpolicy="origin" defer></script>
Les balises <script> et </script> ne doivent pas faire partie du fichier, elles seront générées par la fonction.
document.addEventListener("DOMContentLoaded", function(event) {
tinymce.init({
selector:'textarea' // voir plus loin pour des options plus intéressantes!
});
});
Avec la configuration précédente, toutes les balises <textarea> d'une page Web seront converties en éditeur visuel. Il est possible de changer ce comportement, par exemple ne transformer que les <textarea> qui ont la classe tinymce (ou toute autre classe de votre choix).
document.addEventListener("DOMContentLoaded", function(event) {
tinymce.init({
selector:'textarea.tinymce'
});
});
Et dans le code HTML :
<textarea class="tinymce">...</textarea>
Un des gros avantages de TinyMCE, c'est qu'il est hautement configurable.
Les configurations disponibles sont bien documentées sur le site de TinyMCE. Aussi, je vous présente ici seulement quelques éléments que j'utilise régulièrement.
Pour ajouter des boutons à TinyMCE, il faut ajouter une configuration toolbar dans le tinymce.init().
Certains boutons nécessitent l'ajout d'un plugin, d'où la nécessité d'ajouter les informations requises dans la configuration plugins.
Pour connaître les plugins disponibles : https://www.tiny.cloud/docs/tinymce/latest/plugins/#open-source-plugins
Voici une configuration de base intéressante.
J'ai choisi ici de cacher le menu textuel puisqu'il apparaît par défaut en anglais.
J'aurais aussi pu choisir de redéfinir ce menu avec des options en français ou encore de localiser TinyMCE en français.
Remarquez l'ajout du bouton code 
, qui nécessite le plugin code, pour permettre de consulter le texte en format HTML, ce qui offre toutes les possibilités d'édition.
document.addEventListener("DOMContentLoaded", function(event) {
tinymce.init({
selector:'textarea.tinymce',
menubar: false,
plugins: 'link, image, lists, code, table',
toolbar: 'bold italic | link image | bullist numlist | table | pastetext removeformat | code'
});
});
Pour les sites nécessitant plus d'options, j'ajoute quelques boutons.
Cette configuration permet notamment d'utiliser mes propres classes CSS dans l'éditeur.
document.addEventListener("DOMContentLoaded", function(event) {
tinymce.init({
selector:'textarea.tinymce',
menubar: false,
plugins: 'paste, charmap, link, image, media, lists, code, table',
style_formats: [
{title: 'Important', inline: 'span', classes: 'important'},
{title: 'Paragraphe important', block: 'p', classes: 'important'},
{title: 'Barré', inline: 'span', classes: 'barre'},
{title: 'Couleur 1', inline: 'span', classes: 'couleur1'},
{title: 'Couleur 2', inline: 'span', classes: 'couleur2'},
{title: 'Couleur 3', inline: 'span', classes: 'couleur3'}
],
toolbar: 'undo redo | bold italic | bullist numlist | table tableinsertrowbefore tableinsertcolbefore tabledeleterow tabledeletecol | pastetext removeformat | code | charmap link image media | styles blocks',
content_css: [
'/css/tinymce.css'
]
});
});
▼Publicité
