Démarrer un éditeur React : essai et lecture du HTML du formulaire

Éditeur React avec sauvegarde, restauration et sortie HTML

Exécutez le ZIP React, vérifiez édition et sauvegarde locale, puis adaptez un formulaire sans mélanger les imports ZIP et npm.

Commencer avec le téléchargement

Commencer avec le téléchargement

Décompressez le ZIP React et ouvrez un terminal dans le dossier contenant package.json et package-lock.json. Utilisez Node.js 22.12 ou ultérieur avec npm et vérifiez les exigences en cas d’avertissement. N’ouvrez pas directement index.html. Gardez le fichier de verrouillage et installez avec npm ci.

node --version
npm --version
# Open a terminal in the extracted folder containing package.json.
npm ci
npm run dev -- --host 127.0.0.1

Ouvrez l’URL affichée par Vite ; le port peut changer si le port habituel est occupé. Vérifiez le projet intact avant d’ajouter votre code. Le ZIP contient src/RichTextEditor.jsx, src/richTextEditorBridge.js et public/richtexteditor.

Vérifier le premier parcours

Saisissez du texte : les sorties HTML, Markdown et JSON évoluent. Cliquez sur Save, rechargez puis cliquez sur Load saved. La sauvegarde est uniquement dans le localStorage de ce navigateur, pas une base ou un compte partagé. Changer hôte ou port change l’origine du stockage. Gardez une autre copie des brouillons importants.

Lire le HTML actuel dans un formulaire

Dans une copie du projet, remplacez src/App.jsx par cet exemple. Il importe le composant local du ZIP, attend sa disponibilité et lit le HTML à l’envoi. React affiche la prévisualisation comme texte. Une modification efface l’ancien résultat sans recréer l’éditeur. Aucune requête ni sauvegarde serveur n’est effectuée.

import { useRef, useState } from "react";
import RichTextEditor from "./RichTextEditor";

const config = { toolbar: "full", height: "320px" };
export default function App() {
  const editorRef = useRef(null);
  const [ready, setReady] = useState(false);
  const [error, setError] = useState("");
  const [html, setHtml] = useState("");
  function inspect(event) {
    event.preventDefault();
    if (!ready || !editorRef.current) return;
    setHtml(editorRef.current.getHTMLCode());
  }
  return (
    <main style={{ maxWidth: 960, margin: "24px auto", padding: "0 16px" }}>
      <h1>React editor form</h1>
      <form onSubmit={inspect}>
        <div style={{ maxWidth: "100%", overflowX: "auto" }}>
          <RichTextEditor
            ref={editorRef}
            defaultValue="<p>Write a short note.</p>"
            config={config}
            onReady={() => setReady(true)}
            onError={() => {
              setReady(false);
              setError("Editor assets could not load. Check /richtexteditor, then reload.");
            }}
            onChange={() => setHtml("")}
          />
        </div>
        {error && <p role="alert">{error}</p>}
        <button type="submit" disabled={!ready} style={{ minHeight: 44, padding: "8px 16px" }}>
          Inspect HTML
        </button>
        <p>This example reads HTML only. It does not save to a server.</p>
        <pre aria-label="Current HTML" style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>{html}</pre>
      </form>
    </main>
  );
}

Distinguer les intégrations ZIP et npm

./RichTextEditor est le composant local, pas l’export nommé de @richscripts/richtexteditor/react. Pour npm, suivez sa documentation sans doubler composants ni scripts. Vérifiez que /richtexteditor/rte.js, rte_theme_default.css et plugins/all_plugins.js renvoient des fichiers, pas l’index.html du SPA. Sous un préfixe de chemin, alignez assetBasePath et le répertoire public.

Construire et relier l’application

npm run build
npm run preview -- --host 127.0.0.1

Après le test de développement, construisez et essayez l’URL de prévisualisation affichée. Vite preview sert aux vérifications locales, pas à l’hébergement de production. Une API de sauvegarde doit autoriser le dossier, valider et assainir le HTML et confirmer le résultat. Téléverser une image ne sauvegarde pas le document. Lisez IMAGE-UPLOAD.md avant image-server et ne mettez pas de clés privées dans le client.

À lire ensuite