Inline-Ghost-Text-Vervollständigung

Wenn der Benutzer mit der Eingabe aufhört, fragt der Editor eine von Ihnen angegebene Funktion nach einer Fortsetzung des Satzes und zeigt ihn nach dem Caret in Grau an. Tab akzeptiert es, alles andere verwirft es. Der Editor liefert kein KI-Modell aus und führt keine eigenen Netzwerkaufrufe durch: Ihre Funktion entscheidet, woher der Text kommt.

Schalten Sie es ein

Die Funktion ist dieghostcomplete.jsPlugin (auch inplugins/all_plugins.js). Es gibt keine Symbolleistenschaltfläche. Es läuft nur, wennghostTextist eingestellt undghostTextResolverist eine Funktion.

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

<div id="editor"><p>Our support team answers</p></div>
<script>
var editor = new RichTextEditor("#editor", {
    ghostText: true,
    ghostTextResolver: function (ctx) {
        return fetch("/api/complete", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ before: ctx.before })
        })
            .then(function (r) { return r.json(); })
            .then(function (data) { return data.text; });
    }
});
</script>

Hier/api/completeist Ihr eigener Endpunkt. Es empfängt den Text vor dem Caret, fragt, welches Modell Sie verwenden (behalten Sie den API-Schlüssel auf dem Server) und antwortet{ "text": " every ticket within one business day." }. Beginnen Sie den zurückgegebenen Text mit einem Leerzeichen, wenn er nach einem Wort fortgesetzt wird, da er genau wie zurückgegeben eingefügt wird.

Was der Resolver erhält und zurückgibt

ghostTextResolver(ctx)heißt mit:

• ctx.before: Der Text vom Anfang des aktuellen Absatzes (oder der Überschrift, des Listenelements, der Zelle usw.) bis zum Einfügezeichen, bis zum letzten abgeschnittenmaxContextCharaktere;
• ctx.after: der Text vom Caret bis zum Ende dieses Blocks;
• ctx.full: der Text des gesamten Dokuments.

Gibt einen String oder ein Promise eines Strings zurück. Ein leerer String, ein Nicht-String, ein ausgelöster Fehler oder ein abgelehntes Promise zeigt nichts an. Wenn der Benutzer erneut tippt, bevor die Antwort eintrifft, wird die verspätete Antwort verworfen. Ein Vorschlag wird nur dann angefordert, wennctx.beforehat zumindestminCharsNicht-Leerzeichen werden eingegeben und es ist nichts ausgewählt.

Optionen

Option	Standard	Was es bewirkt
ghostText	false	true oder ein Objekt mit den drei folgenden Einstellungen aktiviert die Funktion.
ghostText.delayMs	600	Pause nach der letzten Eingabe, bevor der Resolver aufgerufen wird. Verwenden Sie eine positive Zahl: 0 gilt als nicht gesetzt und ergibt 600.
ghostText.minChars	3	Wenigste Nicht-Leerzeichen vor dem Caretzeichen.
ghostText.maxContext	2000	Die meisten Zeichen werden in ctx.before übergeben.
ghostTextResolver	null	Ihre Funktion, wie oben beschrieben.

Schlüssel und API

• Tab akzeptiert den Vorschlag. Es wird als getippter Text eingefügt, sodass es mit Strg+Z wieder entfernt wird.
• Escape, die Pfeiltasten Home, End, PageUp und PageDown verwerfen es. Wenn Sie ein beliebiges Zeichen eingeben, wird es verworfen und eine neue Wartezeit beginnt.
• Durch Klicken oder Tippen auf den grauen Text wird dieser akzeptiert (die einzige Möglichkeit auf einem Telefon, das keine Tabulatortaste hat). Wenn Sie irgendwo anders klicken, wird es verworfen.

Methoden: editor.setGhostTextResolver(fn) ersetzt den Resolver zur Laufzeit; editor.requestGhostText() fragt jetzt ohne Wartezeit nach einem Vorschlag; editor.acceptGhostText(), editor.dismissGhostText() und editor.hasGhostText() tun, was ihr Name verspricht. Wenn das Slash-Command-Plugin geladen ist, verfügt das "/"-Menü über einen "AI complete"-Eintrag, der requestGhostText() aufruft. Wenn kein Resolver festgelegt ist, zeigt dieser Aufruf im Editor einen kurzen Hinweis an, dass die Vervollständigung nicht konfiguriert ist.

Wissenswertes

• Während es angezeigt wird, handelt es sich bei dem Vorschlag um dieses Element nach dem Caret:

  <span class="rte-ghost" contenteditable="false" data-rte-ghost="1" aria-hidden="true"> every ticket within one business day.</span>

  getHTMLCode(), getHTMLContent() und getJSON() entfernen es, sodass gespeichertes HTML nur Text enthält, den der Benutzer akzeptiert hat. Bildschirmleseprogramme überspringen es (aria-hidden).
• Die Wort- und Zeichenanzahl in der unteren Leiste umfasst den grauen Text, während er angezeigt wird.
• Jede Eingabepause ist ein Anruf an Ihren Endpunkt. Ratenbegrenzung und Cache auf dem Server und Erhöhung von delayMs, wenn die Anrufe Geld kosten.
Für
• requestGhostText() muss auch ghostText festgelegt werden. mit nur einem Resolver macht es nichts.

Verwandt: AI Toolkit (befehlsgesteuerte KI-Aktionen), KI-Anbieter und Streaming, Demo zur Schreibunterstützung.