AI Toolkit

Überblick

Das AI Toolkit fügt dem Editor drei zusammengehörige Oberflächen hinzu:

• Ask AI – ein aus der Symbolleiste geöffneter Dialog mit sieben Modi per Klick (Korrekturlesen, Umformulieren, Kürzen, Erweitern, Zusammenfassen, Übersetzen, Begründen), einem Umschalter für den Bereich Auswahl/Dokument und einer Vorschau im Text vor dem Anwenden.
• AI Chat – ein angedockter Seitenbereich für Anfragen über mehrere Runden. Berücksichtigt den Bereich, mit Schnell-Prompts und Aktionen zum Kopieren, Anwenden, Einfügen und Ersetzen bei jeder KI-Antwort.
• AI Review – eine dauerhafte Warteschlange offener, angenommener und abgelehnter Vorschläge. Optionale Synchronisierung mit einem Ledger auf dem Server für Reviews über Sitzungen hinweg.

Alle drei teilen denselben Hook aiToolkitResolver und denselben Vertrag für Operationen, sodass ein in einer Oberfläche als Vorschau gezeigter Vorschlag in einer anderen angenommen, abgelehnt oder weitergereicht werden kann.

Demomodus. Ist kein Resolver konfiguriert, bringt das Plugin eine deterministische defaultResolveAction mit, sodass Sie Ask AI, Chat und Review lokal ohne API-Schlüssel, ohne Netzwerkaufruf und mit vorhersagbarer Ausgabe ausführen können.

Installation

Laden Sie Stylesheet und Skript des AI Toolkit nach dem Kern-Bundle des Editors. Standardmäßig fügt das Plugin beim Laden automatisch eine Schaltfläche Ask AI in die mitgelieferten Symbolleisten-Vorgaben default, basic, full und mobile ein.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="/richtexteditor/plugins/aitoolkit.css" />

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<!-- aitoolkit.js is bundled inside all_plugins.js.
     Include it separately only if you are loading plugins piecemeal. -->

<div id="editor"></div>
<script>
  var editor = new RichTextEditor("#editor", {
    toolbar: "full",
    aiToolkitPersistenceKey: "my-editor-ai"
  });
</script>

Konfiguration. Ihre heruntergeladene rte.js enthält oben einen bearbeitbaren Block RTE_DefaultConfig im Klartext – öffnen Sie ihn und ändern Sie die KI-Standardwerte (Persistenzschlüssel, Beschriftung, Resolver-Endpoint usw.) neben allen anderen Editor-Einstellungen. Es muss keine separate Konfigurationsdatei geladen werden. aitoolkit.css muss immer vorhanden sein, wenn die KI-Schaltfläche erscheinen kann (auch mit der Standard-Symbolleiste), sonst hat das Dropdown-Menü der KI eine falsche Größe. Um die KI aktiviert zu lassen, aber das automatische Einfügen der Schaltfläche zu unterbinden, setzen Sie aiToolkitAutoToolbarButtons: false und fügen aiassist dann nur den Symbolleisten hinzu, in denen Sie es haben wollen.

var editor = new RichTextEditor("#editor", {
  toolbar: "default",
  aiToolkitAutoToolbarButtons: false
});

Drei Oberflächen

Eingebaute Modi

Jeder Modus ist ein Eintrag { id, title, description } in config.aiToolkitDialogModes. Die Modi erscheinen im Dropdown Action des Dialogs Ask AI und lassen sich über runQuickAction(id) aufrufen.

Das sind deterministische Platzhalter für den Demo-Resolver. Sobald Sie aiToolkitResolver anbinden, entscheidet Ihre Funktion, wie jeder Modus behandelt wird. Sie können auch neue Modi registrieren – siehe Eigene Aktionen.

Der Hook aiToolkitResolver

Das ist der Erweiterungspunkt. Der Resolver erhält einen strukturierten Request und gibt ein Ergebnis zurück (oder ein Promise, das zu einem Ergebnis aufgelöst wird). Der Editor übernimmt Darstellung, Vorschau, Review und Anwenden.

var editor = new RichTextEditor("#editor", {
  toolbar: "full",
  aiToolkitResolver: async function (request) {
    var reply = await fetch("/api/ai", {
      method: "POST",
      body: JSON.stringify({
        mode: request.mode,
        text: request.source,
        language: request.language
      })
    }).then(function (r) { return r.json(); });

    return {
      result: reply.text,             // string: the AI output
      reason: reply.explanation,      // string: why this change
      operations: [{                  // structured plan (optional)
        type: "preview-suggestion",
        text: reply.text,
        reason: reply.explanation
      }]
    };
  }
});

Aufbau des Requests

Aufbau der Antwort

Geben Sie ein einfaches Objekt mit beliebigen der folgenden Felder zurück. Alle sind optional; lassen Sie weg, was Sie nicht brauchen.

Sie können auch einen String oder ein Promise zurückgeben. Ein String wird zu { result: <that string> }; auf ein Promise wird gewartet.

Operationstypen

Operationen sind der strukturierte Plan, den Ihr Resolver zurückgeben kann. Der Editor führt sie der Reihe nach aus (oder vom Benutzer gesteuert, einzeln, aus dem Planbereich).

Eigene Operationstypen lassen sich mit editor.aiToolkit.registerOperationHandler(type, handler) registrieren.

editor.aiToolkit.registerOperationHandler("insert-callout", function (op, ctx) {
  // ctx = { snapshot, resolved, request, action, editor }
  ctx.editor.insertHTML(
    '<aside class="callout">' + ctx.editor.htmlEncode(op.text) + '</aside>'
  );
  return true; // mark the operation as handled
});

API für den Code

Alle Oberflächen lassen sich über editor.aiToolkit aus dem Code öffnen und steuern.

// Open the Ask AI dialog
editor.aiToolkit.openDialog({ presetMode: "rewrite", autoRun: false });

// Quick actions (no dialog) - target: selection if present, else whole document
editor.aiToolkit.runQuickAction("proofread");
editor.aiToolkit.runQuickAction("translate", { language: "spanish" });

// Panels
editor.aiToolkit.openChatPanel({ focusComposer: true });
editor.aiToolkit.openReviewPanel({ focusPanel: true });
editor.aiToolkit.closeChatPanel();
editor.aiToolkit.closeReviewPanel();
editor.aiToolkit.toggleChatPanel();
editor.aiToolkit.toggleReviewPanel();

// Resolve without rendering - useful for tests + headless flows
editor.aiToolkit.resolveAction("rewrite", { source: "hello world" })
  .then(function (resolved) { console.log(resolved.result); });

// Swap the resolver at runtime
editor.aiToolkit.setResolver(myResolver);

// Review queue
var pending = editor.aiToolkit.getSuggestions();
editor.aiToolkit.clearSuggestions();
editor.aiToolkit.saveSuggestionLedger();
editor.aiToolkit.loadSuggestionLedger();

Eigene Aktionen & Modi

Registrieren Sie fachspezifische Aktionen (z. B. Umformulieren für SEO, Prüfung juristischer Klauseln, Anpassung an einen Tonfall). Sie fügen sich in dieselbe Oberfläche aus Dialog, Chat und Review ein.

// Add a new dialog mode (appears in the Action dropdown)
editor.aiToolkit.registerDialogMode({
  id: "seo",
  title: "SEO rewrite",
  description: "Rewrite for stronger keyword coverage while preserving meaning."
});

// Register the action with a target (where output goes by default)
editor.aiToolkit.registerAction({
  id: "seo",
  title: "SEO rewrite",
  target: "selection-preview",
  resolverMode: "seo"          // passed as request.mode to your resolver
});

// Your resolver handles it just like built-in modes
config.aiToolkitResolver = function (request) {
  if (request.mode === "seo") { /* call your SEO service */ }
  /* ... */
};

Persistenz & entferntes Ledger

Vorschläge in der Seitenleiste AI Review werden unter einem Schlüssel, den Sie festlegen, in localStorage gespeichert. Setzen Sie aiToolkitPersistenceKey, um sie auf eine Editor-Instanz zu beschränken (z. B. pro Dokument).

new RichTextEditor("#editor", {
  aiToolkitPersistenceKey: "doc-42-review",     // localStorage scope
  aiToolkitSuggestionLedgerUrl: "/api/ai/ledger", // optional GET/POST for cross-session sync
  aiToolkitReviewLogUrl: "/api/ai/review-log",    // optional activity feed endpoint
  aiToolkitReviewSyncInterval: 15000               // ms between sync polls (default 15s)
});

Ist die Ledger-URL gesetzt, sendet das Plugin beim Öffnen ein GET und beim Annehmen oder Ablehnen ein POST, sodass die Review-Warteschlange Sitzungen überdauert und zwischen Prüfern geteilt werden kann.

BYOK (Bring Your Own Key)

Wichtig: Der Editor nimmt keine API-Schlüssel an und speichert keine. Schlüssel gehören in Ihren serverseitigen Secrets Manager.

Das empfohlene Muster für BYOK:

1. In Ihrer Admin-Oberfläche wählt ein Mandant einen Anbieter und fügt einen Schlüssel ein. Das Formular sendet per POST an Ihr Backend.
2. Ihr Backend schreibt den Schlüssel, dem Mandanten zugeordnet, in Ihren Secrets Manager.
3. Der aiToolkitResolver des Editors sendet per POST mit dem Session-Cookie an /api/ai. Kein Schlüssel im Browser.
4. Ihr Backend sucht den Schlüssel des Mandanten heraus, ruft den Anbieter auf und gibt eine gekürzte Antwort zurück.

Ein funktionierendes Admin-Formular, einen weiterleitenden Resolver und eine Serverskizze im Stil von Express zeigt die BYOK-Demo.

Konfigurationsreferenz

Ausprobieren

Jede der Oberflächen oben läuft in den öffentlichen Demos ohne API-Schlüssel:

• Demo zum AI Toolkit – Ask AI, Schnellaktionen, Chat, Review-Seitenleiste
• BYOK-Demo – Formular für Admin-Einstellungen + weiterleitender Resolver + Serverskizze
• Überblick über das AI Toolkit – Produktseite mit einem Live-Mockup des Editors