Démarrage rapide

1. Obtenir l’éditeur

Trois voies. Le CDN ne nécessite aucune installation et c’est le moyen le plus rapide de voir l’éditeur fonctionner ; les deux autres sont celles qu’utilisent les déploiements en production.

Option A — Télécharger le bundle sous licence

Rendez-vous sur /download et récupérez le bundle de votre framework. Décompressez-le dans votre site pour que l’éditeur se trouve sous /richtexteditor/ :

your-site/
├── richtexteditor/
│   ├── rte.js                       ← protected production build (~410 KB)
│   ├── rte_theme_default.css
│   ├── plugins/
│   │   ├── all_plugins.js           ← AI Toolkit, comments, slash, mentions, etc.
│   │   ├── aitoolkit.css
│   │   ├── crdt-engine.min.js       ← Per-node Yjs CRDT (load only if you use collab)
│   │   └── ...
│   └── lang/                        ← optional translations
└── your-page.html

Option B — npm (recommandé)

npm install @richscripts/richtexteditor

# or scaffold a complete working example app:
npm create @richscripts/richtexteditor my-app -- --react   # also: --vue, --angular, --svelte

Importez ensuite les styles et le bundle depuis votre pipeline de build :

// Side-effect import attaches `RichTextEditor` to `window`.
import "@richscripts/richtexteditor/richtexteditor/rte.js";
import "@richscripts/richtexteditor/richtexteditor/plugins/all_plugins.js";

// Or via the typed React wrapper (Vue / Angular wrappers shipped too):
import { RichTextEditorComponent } from "@richscripts/richtexteditor/react";

Option C — CDN, rien à installer

jsDelivr et unpkg reflètent tous deux le package npm publié : un éditeur fonctionnel tient donc en deux balises dans un fichier HTML vide — sans téléchargement, sans étape de build, sans compte. Collez ceci dans un CodePen et cela fonctionne :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/rte_theme_default.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/rte.js"></script>

<div id="div_editor1">Hello RichTextEditor</div>
<script>
  var editor1 = new RichTextEditor("#div_editor1");
</script>

Vous obtenez ainsi l’éditeur de base et sa barre d’outils. Ajoutez une balise de plus pour l’ensemble complet des plugins — AI Toolkit, commentaires, commandes slash, mentions, tableaux de mise en page, etc. :

<script src="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/plugins/all_plugins.min.js"></script>

Une ligne facultative. La surface d’édition demande sa feuille de style de contenu à l’adresse /richtexteditor/runtime/richtexteditor_content.css sur votre origine, qu’une page utilisant uniquement le CDN ne possède pas : vous verrez donc une erreur 404 dans le panneau Réseau. Rien ne casse — l’éditeur embarque les mêmes valeurs par défaut en ligne et la surface est stylée dans tous les cas —, mais vous pouvez la faire pointer vers la copie du CDN, et la requête disparaît :

var editor1 = new RichTextEditor("#div_editor1", {
  contentCssUrl: "https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/runtime/richtexteditor_content.css"
});

Figez la version. Chaque chemin ci-dessus indique @2.16.0 à dessein : une URL figée est immuable et mise en cache pendant un an, si bien que votre page ne peut pas changer à votre insu. @2 correspond à la dernière version 2.x, ce qui est utile pendant l’évaluation et imprudent en production. Remplacez l’hôte par https://unpkg.com/ et les mêmes chemins fonctionnent.

Ou servez-le depuis notre domaine. Les mêmes fichiers sont publiés sur cdn.richtexteditor.com — le build exact, à l’octet près, qu’utilise ce site, mis en cache à la périphérie de Cloudflare, sans tiers entre vous et nous :

<link rel="stylesheet" href="https://cdn.richtexteditor.com/richtexteditor/rte_theme_default.min.css" />
<script src="https://cdn.richtexteditor.com/richtexteditor/rte.js"></script>
<script src="https://cdn.richtexteditor.com/richtexteditor/plugins/all_plugins.min.js"></script>

Le compromis porte sur le figeage de version, et il joue dans l’autre sens. Ces chemins ne portent pas de version : ils servent donc toujours la version courante, et vous ne pouvez pas maintenir une page sur une version plus ancienne ; les navigateurs sont invités à revérifier toutes les quatre heures. Les URL jsDelivr ci-dessus sont immuables pour chaque version, ce que vous voulez pour un build que vous devrez reproduire dans plusieurs mois. Utilisez cdn.richtexteditor.com lorsque vous préférez ne pas ajouter de tiers à votre page, et les URL jsDelivr figées lorsque vous avez besoin de verrouiller la version.

Deux choses à savoir avant de mettre en production. Le CDN est un tiers qui sert votre page — pratique pour les essais, les prototypes et les rapports de bug, mais ce sont les voies auto-hébergées ci-dessus qui gardent l’éditeur entièrement dans votre propre infrastructure, ce qui est tout l’intérêt d’une licence perpétuelle. Et un CDN change la façon dont les fichiers parviennent au navigateur, pas ce que votre licence vous autorise à en faire ; consultez /license.

2. Ajouter le script et créer votre premier éditeur

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<div id="div_editor1">Hello RichTextEditor</div>
<script>
    var editor = new RichTextEditor("#div_editor1");
</script>

Vous avez un éditeur fonctionnel avec la barre d’outils par défaut. Ouvrez la page dans un navigateur et commencez à taper.

3. Personnaliser la barre d’outils

Transmettez un objet de configuration en second argument :

var editor = new RichTextEditor("#div_editor1", {
    toolbar:    "basic",      // "basic" | "full" | "mobile" | "custom"
    height:     "500px",
    showStatistics:  true,    // word / character count in the bottom bar
    showFloatTextToolBar: true
});

Pour une barre d’outils personnalisée avec des groupes explicites :

var editor = new RichTextEditor("#div_editor1", {
    toolbar: "custom",
    toolbar_custom:
        "{bold,italic,underline}|" +
        "{insertorderedlist,insertunorderedlist}|" +
        "{insertlink,insertimage}|" +
        "{aiassist,aichat}|" +
        "{undo,redo}"
});

Consultez la référence des éléments de barre d’outils et de menu pour tous les noms de commandes.

4. Lire et écrire le contenu

// Get the current HTML
var html = editor.getHTMLCode();

// Replace the editor's content
editor.setHTMLCode("<p>New content</p>");

// Get plain text (no markup)
var text = editor.getPlainText();

// Get a structured-content JSON document (lossless round-trip with setJSON())
var json = editor.getJSON();
editor.setJSON(json);

5. Envoyer le contenu avec un formulaire

Si votre éditeur se trouve dans un <form>, RichTextEditor écrit automatiquement le HTML de l’éditeur dans un champ masqué qui reprend l’id du conteneur de l’éditeur. Côté serveur, vous le lisez dans la requête comme n’importe quel autre champ de formulaire. Pour des envois dynamiques, appelez editor.getHTMLCode() depuis votre gestionnaire d’envoi :

document.getElementById("save").addEventListener("click", function () {
    fetch("/api/save", {
        method:  "POST",
        headers: { "Content-Type": "application/json" },
        body:    JSON.stringify({ html: editor.getHTMLCode() })
    });
});

6. Choisir l’étape suivante