React-Rich-Text-Editor: Testversion starten und Formular-HTML lesen

React-Testeditor mit Speichern, Laden und HTML-Ausgabe

React-Download starten, Bearbeitung und lokale Speicherung prüfen und ein kleines Formular ohne vermischte Importwege anbinden.

Mit dem Download beginnen

Mit dem Download beginnen

Entpacken Sie das React-ZIP und öffnen Sie ein Terminal im Ordner mit package.json und package-lock.json. Nutzen Sie Node.js ab 22.12 und npm; beachten Sie Engine-Warnungen der Pakete. Öffnen Sie index.html nicht direkt. Behalten Sie das Lockfile und installieren Sie dessen Abhängigkeiten mit 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

Öffnen Sie die von Vite ausgegebene URL. Ein belegter Standardport kann sich ändern. Prüfen Sie erst das unveränderte Beispiel. Das ZIP enthält src/RichTextEditor.jsx, src/richTextEditorBridge.js und public/richtexteditor.

Den ersten Ablauf prüfen

Beim Schreiben aktualisieren sich HTML, Markdown und JSON. Klicken Sie Save, laden Sie neu und klicken Sie Load saved. Gespeichert wird nur im localStorage dieses Browsers, nicht in einer Datenbank oder einem gemeinsamen Konto. Andere Hostnamen oder Ports haben einen anderen Speicherursprung. Sichern Sie wichtige Entwürfe zusätzlich.

Aktuelles HTML im Formular lesen

Ersetzen Sie src/App.jsx in einer separaten Kopie durch dieses Beispiel. Es nutzt den lokalen ZIP-Wrapper, wartet auf Bereitschaft und liest beim Absenden aktuelles HTML. React zeigt die Vorschau als Text. Neue Änderungen leeren alte Ausgaben, ohne den Editor neu einzuhängen. Es wird keine Anfrage gesendet und keine Serverspeicherung behauptet.

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>
  );
}

ZIP- und npm-Integration trennen

./RichTextEditor ist der lokale Wrapper, nicht der benannte Export aus @richscripts/richtexteditor/react. Folgen Sie bei npm den passenden Anleitungen und laden Sie weder Wrapper noch Skripte doppelt. Prüfen Sie, ob /richtexteditor/rte.js, rte_theme_default.css und plugins/all_plugins.js echte Dateien statt der SPA-index.html liefern. Stimmen Sie bei Unterpfaden assetBasePath und den tatsächlichen Ablageort ab.

Bauen und an die Anwendung anbinden

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

Bauen Sie nach erfolgreichem Entwicklungstest und öffnen Sie die ausgegebene Vorschau-URL. Vite preview ist lokale Prüfung, kein Produktionshosting. Ein Speicherendpunkt muss Berechtigungen prüfen, HTML validieren und bereinigen und den Erfolg bestätigen. Bild-Upload speichert nicht das Dokument. Lesen Sie IMAGE-UPLOAD.md vor dem optionalen image-server. Keine Anbieter- oder Speicherschlüssel im Client hinterlegen.

Weiterlesen