Comment installer TinyMCE dans un projet utilisant React ou NextJS ?

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@latest

Sélectionnez React est le tour est joué. 😬

Pour un projet NextJS

Si vous travaillez avec NextJS, utilisez cette commande :

npx create-next-app@latest

Laissez-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-react

Cette 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".

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 images
• code - pour ajouter un bloc de code pour présenter un extrait de code par exemple
• link - pour ajouter des liens
• lists - pour créer des listes
• table - 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 boutons bullist et numlist
• link - permet d'utiliser le bouton link
• image - permet d'utiliser le bouton image

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 !