Schnellstart

1. Den Editor beziehen

Drei Wege. Das CDN braucht überhaupt keine Installation und ist der schnellste Weg, den Editor laufen zu sehen; die anderen beiden verwenden Produktivumgebungen.

Option A – Das lizenzierte Bundle herunterladen

Rufen Sie /download auf und laden Sie das Bundle für Ihr Framework herunter. Entpacken Sie es in Ihre Website, sodass der Editor unter /richtexteditor/ liegt:

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 (empfohlen)

npm install @richscripts/richtexteditor

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

Importieren Sie dann Styles + Bundle in Ihrer Build-Pipeline:

// 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, nichts zu installieren

jsDelivr und unpkg spiegeln beide das veröffentlichte npm-Paket, sodass ein funktionierender Editor aus zwei Tags in einer leeren HTML-Datei besteht – kein Download, kein Build-Schritt, kein Konto. Fügen Sie das in einen CodePen ein, und es läuft:

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

Damit haben Sie den Kern-Editor und seine Symbolleiste. Ein weiteres Tag bringt den vollständigen Plugin-Satz – AI Toolkit, Kommentare, Slash-Befehle, Erwähnungen, Layouttabellen und den Rest:

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

Eine optionale Zeile. Die Bearbeitungsfläche fordert ihr Inhalts-Stylesheet unter /richtexteditor/runtime/richtexteditor_content.css auf Ihrem Origin an, das eine reine CDN-Seite nicht hat, daher sehen Sie im Netzwerkbereich ein 404. Nichts geht kaputt – der Editor bringt dieselben Standardwerte inline mit, und die Fläche ist so oder so gestaltet –, aber Sie können ihn auf die Kopie im CDN verweisen, und der Request verschwindet:

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

Legen Sie die Version fest. Jeder Pfad oben nennt absichtlich @2.16.0: Eine festgelegte URL ist unveränderlich und wird ein Jahr lang gecacht, sodass sich Ihre Seite nicht unter Ihnen ändern kann. @2 verweist auf das neueste Release 2.x, was bei der Evaluierung nützlich und in der Produktion unklug ist. Ersetzen Sie den Host durch https://unpkg.com/, und dieselben Pfade funktionieren dort.

Oder von unserer Domain ausliefern. Dieselben Dateien sind unter cdn.richtexteditor.com veröffentlicht – Byte für Byte der Build, den diese Website selbst verwendet, am Edge von Cloudflare gecacht, ohne Dritte zwischen Ihnen und uns:

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

Der Kompromiss betrifft das Festlegen der Version, und zwar in umgekehrter Richtung. Diese Pfade enthalten keine Version, liefern also immer das aktuelle Release aus, und Sie können eine Seite nicht auf einer älteren halten; Browser werden angewiesen, alle vier Stunden neu zu prüfen. Die jsDelivr-URLs oben sind pro Version unveränderlich, und das wollen Sie für einen Build, den Sie in Monaten noch reproduzieren müssen. Verwenden Sie cdn.richtexteditor.com, wenn Sie Ihrer Seite keinen Dritten hinzufügen möchten, und die festgelegten jsDelivr-URLs, wenn die Version fest sein muss.

Zwei Dinge sollten Sie vor dem Livegang wissen. Das CDN ist ein Dritter, der Ihre Seite beliefert – praktisch für Tests, Prototypen und Fehlerberichte, aber nur die selbst gehosteten Wege oben halten den Editor vollständig in Ihrer eigenen Infrastruktur, und genau darum geht es bei einer unbefristeten Lizenz. Und ein CDN ändert, wie die Dateien den Browser erreichen, nicht, was Sie laut Lizenz damit tun dürfen; siehe /license.

2. Das Skript einbinden und den ersten Editor erstellen

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

Das ist ein funktionierender Editor mit der Standard-Symbolleiste. Öffnen Sie ihn in einem Browser und beginnen Sie zu tippen.

3. Die Symbolleiste anpassen

Übergeben Sie als zweites Argument ein Konfigurationsobjekt:

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

Für eine eigene Symbolleiste mit expliziten Gruppen:

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

Jeden Befehlsnamen finden Sie in der Referenz der Symbolleisten- & Menüeinträge.

4. Inhalt lesen und schreiben

// 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. Inhalt mit einem Formular senden

Sitzt Ihr Editor in einem <form>, schreibt RichTextEditor das HTML des Editors automatisch in ein verstecktes Feld, das der Container-ID des Editors entspricht. Auf dem Server lesen Sie es wie jedes andere Formularfeld aus dem Request. Für dynamisches Absenden rufen Sie editor.getHTMLCode() in Ihrem Submit-Handler auf:

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

6. Den nächsten Schritt wählen