TinyMCE est l'un des éditieurs de texte enrichi les plus populaires, si ce n'est même le plus utilisé. Il propose une expérience d'édition complète avec tout un tas d'options personnalisables pour s'adapter parfaitement aux besoins de chaque projet.
En d'autres termes, il améliore grandement l'expérience utilisateur en proposant aux utilisateurs de remplir leurs informations comme s'ils étaient sur un éditeur Google Docs !
On parle aussi d'éditeur wysiwyg (what you see is what you get - ce que tu vois c'est ce que tu obtiens en bon français 😋).
Ceci veut dire que les éléments que l'on voit dans l'éditeur, comme un paragraphe en gras, un titre plus grand, ou une image, sont la représentation exacte du rendu que nous aurons en réalité : pas de markdown, rien. Juste le contenu de notre page tel qu'il sera affiché.
Voyons maintenant comment installer et configurer TinyMCE dans un projet utilisant React ou NextJS (Next.js pour les intimes) ! 😉
Prérequis pour l'installation
Avant de commencer à utiliser TinyMCE, assurez-vous :
- d'avoir un projet réalisé avec React ou NextJS
- d'avoir NodeJS ainsi que npm installés
Il est possible également d'utiliser TinyMCE avec JavaScript : la démarche est simple et si vous voulez de l'aide n'hésitez pas à le dire en commentaires.
Initialiser un projet React ou NextJS
Si vous n'avez pas encore de projet React ou NextJS, voici comment en créer un rapidement.
Pour un projet React
Il suffit d'initialiser votre projet grâce à Vite :
npm create vite@latestSélectionnez React est le tour est joué. 😬
Pour un projet NextJS
Si vous travaillez avec NextJS, utilisez cette commande :
npx create-next-app@latestLaissez-vous guider et hop : un nouveau projet tout neuf.
Installer TinyMCE
Pour installer TinyMCE dans notre projet, nous allons devoir utiliser le package officiel @tinymce/tinymce-react.
npm install @tinymce/tinymce-reactCette commande nous permet de télécharger TinyMCE ainsi que toutes ses dépendances nécessaires à son bon fonctionnement.
Intégrer TinyMCE dans un composant
Pour utiliser TinyMCE, la meilleure approche consiste à utiliser un composant dédié.
Nous verrons après comment personnaliser TinyMCE avec des centaines d'options : vous serez bien content quand il vous suffira d'appliquer les modifications sur votre component dédié à TinyMCE plutôt que sur vos centaines de pages qui utilisent l'éditeur ! 😉
Créer un composant dédié exclusivement à TinyMCE
Créons donc un fichier TinyEditor.js :
import { Editor } from '@tinymce/tinymce-react';
import { useState } from 'react';
const TinyEditor = () => {
const [content, setContent] = useState('');
const handleEditorChange = (content) => {
setContent(content);
console.log('Contenu édité:', content);
};
return (
<div>
<Editor
apiKey='votre-cle-api'
initialValue="<p>Écrivez ici...</p>"
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
}}
onEditorChange={handleEditorChange}
/>
<p>Contenu édité : {content}</p>
</div>
);
};
export default TinyEditor;Pour commencer, nous importons le composant Editor du package TinyMCE qui permet d'afficher un éditeur de texte enrichi.
Il est obligatoire de préciser la propriété apiKey. Nous la générerons juste après ! 😉
Dans cet exemple, nous utilisons la propriété initialValue qui permet de définir une valeur initiale quand l'utilisateur voit pour la première fois l'éditeur de texte. Cette propriété est facultative.
La propriété init permet, elle, d'initialiser TinyMCE -les propriétés suivantes :
height- permet de préciser la hauteur de l'éditeur ;menubar- permet d'afficher ou non une barre de menu (comme sur un vrai éditeur de texte) ;plugins- c'est ici qu'on ajoute les plugins que nous souhaitons utiliser ;toolbar- c'est ici qu'on place les plugins que nous avons ajouté. Ceci nous permet d'organiser les boutons de la manière que nous voulons.
Enfin, onEditorChange permet de préciser ce que l'éditeur doit faire quand une modification est réalisée. Ici, nous stockons le contenu modifié dans le state content et nous affichons son contenu dans la console.
Générer une clé API pour utiliser TinyMCE
Pour utiliser TinyMCE, une clé API est obligatoire.
Pour la générer, il suffit de créer un compte sur TinyMCE : cliquez sur ce lien.
Cliquez ensuite sur "Get your API Key".
.webp&w=3840&q=75)
Récupérez votre clé API et modifiez votre propriété apiKey dans votre composant TinyEditor.
Enfin, n'oubliez pas d'ajouter votre domaine dans "Approved Domains" pour que votre éditeur puisse fonctionner sur votre site.
Afin que votre éditeur fonctionne sur votre site local ajoutez aussi localhost. Autrement TinyMCE ne se chargera que sur votre domaine.
Utiliser le composant avec React
Pour utiliser notre composant TinyEditor avec React, rien de plus simple : il suffit de l'appeler !
import TinyEditor from '../components/Editor';
export default function Home() {
return (
<div>
<h1>Mon Éditeur TinyMCE</h1>
<TinyEditor />
</div>
);
}
Il ne reste plus qu'à ajouter des propriétés qui vous permettront de récupérer les données de votre éditeur.
Le cas spécifique de NextJS
Avec NextJS, il est probable que vous finissiez par tomber sur une erreur concernant le rendu côté serveur (SRR).
En effet, TinyMCE utilise de nombreux objets qui sont uniquement disponibles avec le navigateur, comme l'objet window.
Heureusement, il existe une solution simple pour désactiver le SSR uniquement pour TinyMCE ! 😗
Pour éviter l’erreur "window is not defined", utilisez la fonction dynamic de NextJS pour charger TinyMCE uniquement côté client :
import dynamic from 'next/dynamic';
const TinyEditor = dynamic(() => import('../components/TinyEditor'), {
ssr: false
});
export default function Home() {
return (
<div>
<h1>Mon Éditeur TinyMCE</h1>
<TinyEditor />
</div>
);
}Notre éditeur est dès maintenant rendu exclusivement sur le client, résolvant ainsi les problèmes liés au SSR.
Personnaliser TinyMCE
L'un des gros points forts de TinyMCE est sa modularité en matière de personnalisation. Il est en effet possible d'activer mais également de désactiver tous les plugins que vous voulez (ou presque) pour répondre aux besoins de vos projets et de vos utilisateurs.
Les plugins disponibles avec TinyMCE
TinyMCE propose de nombreux plugins, mais tous ne sont pas gratuits. 😕
Heureusement, les meilleurs sont disponibles gratuitement ! Voici une petite liste des meilleurs plugins à utiliser dans votre éditeur :
autolink- pour créer des liens automatiquement (sans passer par le bouton "ajouter un lien")image- pour ajouter des imagescode- pour ajouter un bloc de code pour présenter un extrait de code par exemplelink- pour ajouter des lienslists- pour créer des listestable- pour ajouter des tableaux
La liste complète des plugins disponibles avec TinyMCE est sur ce lien si vous souhaitez voir plus de possibilités.
Ajouter ou retirer des plugins
Ajouter des plugins
Pour ajouter des plugins dans TinyMCE, nous devons les spécifier dans la propriété plugins que nous avons vu pendant l'initialisation dans notre componsant TinyEditor.
Voici un petit exemple avec des plugins de notre sélection :
<Editor
apiKey='votre-cle-api'
init={{
height: 500,
plugins: 'autolink lists link image',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image',
menubar: false
}}
onEditorChange={handleEditorChange}
/>Dans cet exemple :
autolink: convertit automatiquement les URLs en liens ;lists: permet de créer et personnaliser des listes à puces ou numérotées ;link: permet d'ajouter et modifier des liens en modifiant l'ancre de celui-ci (le texte du lien) ;image: permet d'ajouter des images.
Notez que chaque plugin ajouté donne la possibilité d'utiliser des boutons. Certains sont proposés par défaut, comme undo et redo, mais d'autres viennent avec l'ajout d'un plugin très spécifique, comme :
lists- permet d'utiliser les boutonsbullistetnumlistlink- permet d'utiliser le boutonlinkimage- permet d'utiliser le boutonimage
Certains plugins proposont donc plusieurs boutons quand d'autres n'en proposent qu'un : ceci nous permet de personnaliser l'ordre des boutons dans notre menu.
Certains boutons sont disponibles par défaut : c'est le cas des boutons undo et redo qui permettent de naviguer entre les changements apportés à notre contenu.
Retirer des plugins
Si certains plugins ne sont pas nécessaires, il vous suffit de ne pas les ajouter.
Par exemple, le même éditeur que notre exemple précédent mais sans le plugin qui permet de gérer les images donne ce code :
<Editor
apiKey='votre-cle-api'
init={{
height: 500,
plugins: 'autolink lists link',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link',
menubar: false
}}
onEditorChange={handleEditorChange}
/>Nous avons retiré le plugin image mais également le bouton qui lui était associé (image).
Conclusion
TinyMCE est vraiment un excellent éditeur wysiwyg. Très simple à intégrer, facilement modulaire pour l'adapter à nos projets, ce n'est pas un hasard s'il est aujourd'hui l'éditeur le plus utilisé ! 😋
Si vous voulez en savoir plus sur React ou NextJS, commencez dès maintenant notre formation parfaitement à jour sur React ou sur NextJS !