@Erwähnungen

Typ@und ein paar Buchstaben, um eine Person aus einer Liste auszuwählen. Der Redakteur fügt die Person als kleinen, nicht editierbaren Chip ein, der ihre ID trägt, sodass Ihr Server erkennen kann, wer erwähnt wurde. Die Liste kann ein statisches Array oder eine Funktion sein, die Ihren Server fragt.

Der Redakteur mit einem @Ana Ruiz-Chip bereits im Satz und der unter @b geöffneten Erwähnungsauswahl, die Ben Okafor und Bea Lindqvist mit ihren E-Mail-Adressen auflistet — Eine Erwähnung ist bereits eingefügt und die Auswahl für die nächste ist geöffnet. Durch Eingabe wird die Liste eingegrenzt; Enter wählt die markierte Person aus.

Schalten Sie es ein

Die Funktion ist diementionplugin.jsPlugin (ebenfalls enthalten inplugins/all_plugins.js). Es gibt keine Symbolleistenschaltfläche: Die Auswahl wird geöffnet, wenn der Benutzer das Auslösezeichen eingibt. Der@Der Trigger wird nur registriert, wenn Sie dem Editor eine Liste oder eine Quelle geben, sodass das Laden des Plugins allein nichts bewirkt.

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

<div id="editor"><p>Thanks for the review.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
    mentionStaticList: [
        { id: "u1", label: "Ana Ruiz", subtitle: "ana@example.com" },
        { id: "u2", label: "Ben Okafor", subtitle: "ben@example.com" },
        { id: "u3", label: "Bea Lindqvist", subtitle: "bea@example.com" },
        { id: "u4", label: "Chen Wei", subtitle: "chen@example.com" }
    ]
});
</script>

Jeder Artikel benötigt eineidund alabel. subtitleUndavatarUrlsind optional; Ohne Avatar zeigt der Picker die Initialen der Person. Gegenstände geformt{ id, name, email }funktioniert auch:namewird als Beschriftung verwendet undemailals Untertitel.

Fragen Sie Ihren Server

Für ein echtes Benutzerverzeichnis übergeben SiementionSourcestattdessen. Es empfängt den nach dem Auslöser eingegebenen Text und gibt ein Array oder ein Versprechen von einem zurück. Während es läuft, wird der Picker angezeigt"Searching…"; Es wird ein leeres Ergebnis angezeigt"No matches" .

var people = [{ id: 7, name: "Ana Ruiz", email: "ana@example.com" }, { id: 9, name: "Ben Okafor", email: "ben@example.com" }];
var editor = new RichTextEditor("#editor", {
    mentionSource: function (query, ctx) {
        // ctx.trigger is "@"; replace this with a fetch to your own endpoint
        return new Promise(function (resolve) {
            setTimeout(function () {
                resolve(people.filter(function (p) { return p.name.toLowerCase().indexOf(query.toLowerCase()) >= 0; }));
            }, 100);
        });
    }
});

Der erste Aufruf direkt nach dem Trigger enthält eine leere Abfrage und wird sofort ausgeführt. Spätere Anrufe wartenmentionDebounceMsnach dem letzten Schlüssel. Antworten, die nach einer neueren Abfrage eintreffen, werden verworfen.

Optionen

Option	Standard	Was es bewirkt
`mentionStaticList`	`null`	Reihe von Menschen. Gefiltert nach einer Übereinstimmung ohne Berücksichtigung der Groß-/Kleinschreibung für Label, Untertitel und ID. Bei einer leeren Abfrage werden die ersten 50 angeboten.
`mentionSource`	`null`	`function (query, ctx)` gibt ein Array oder ein Versprechen zurück. Wird anstelle der statischen Liste verwendet, wenn beide festgelegt sind.
`mentionTrigger`	`"@"`	Das Zeichen, das die Auswahl öffnet.
`mentionMaxItems`	`8`	Die meisten Artikel werden auf einmal angezeigt.
`mentionDebounceMs`	`150`	Warten Sie nach der Eingabe, bevor Sie die Quelle erneut aufrufen.
`mentionInsertClass`	`"rte-mention"`	Klasse auf dem eingesetzten Chip.
`mentionTriggers`	`null`	Array zusätzlicher Triggerdefinitionen (gleiche Form wie `register` unten), beim Start registriert.
`mentionEnabled`	`true`	`false` schaltet das Plugin aus; `editor.mentions` wird dann nicht erstellt.

Weitere Trigger und die API

editor.mentions.register() fügt einen Auslöser hinzu, zum Beispiel # für Tags. Geben Sie source(query, ctx) wie oben ein, oder search(query, done) und rufen Sie done(list) auf.

editor.mentions.register({
    trigger: "#",
    search: function (query, done) { done([{ id: "t-12", label: "release-2.6" }, { id: "t-13", label: "billing" }]); },
    insertClass: "tag-chip"
});

Eine Definition kann auch renderItem(item) (Rückgabetext oder einen Knoten für die Listenzeile), renderInsert(item) (gibt den Chiptext oder einen Knoten zurück) und label (den zugänglichen Namen der Liste) enthalten. Die anderen Methoden sind editor.mentions.remove(trigger), list(), close() und isOpen().

Tasten bei geöffnetem Picker: Pfeil nach oben und Pfeil nach unten bewegen, Eingabetaste oder Tabulatortaste zum Einfügen, Escape schließt. Durch Eingabe eines Leerzeichens wird es ebenfalls geschlossen. Der Picker wird nur am Anfang einer Zeile oder nach einem Leerzeichen geöffnet, sodass eine E-Mail-Adresse wie mail@example.com ihn nicht öffnet und niemals innerhalb von <code>, <pre> oder einem vorhandenen Chip.

Wissenswertes

Dies ist der HTML-Code, der gespeichert wird. Auf den Chip folgt ein geschütztes Leerzeichen, sodass das Caret irgendwo hingehen kann:
```
<p>Thanks for the review. <span class="rte-mention" contenteditable="false" data-rte-mention-id="u1" data-rte-mention-trigger="@">@Ana Ruiz</span>&nbsp;and ...</p>
```
Lesen Sie data-rte-mention-id auf dem Server, um Benachrichtigungen zu senden. Wenn Sie den HTML-Code bereinigen, erlauben Sie span mit class, contenteditable und den beiden data-rte-mention-*-Attributen.
Der Pillenstil des Chips wird nur im Editor hinzugefügt. Die Seite, die den gespeicherten HTML-Code anzeigt, benötigt ein eigenes CSS für .rte-mention, und ein benutzerdefinierter insertClass erhält überhaupt keinen Stil.
Der Auslöser wird mit der vom Benutzer gedrückten Taste verglichen, daher muss es sich um ein einzelnes Zeichen handeln.
Die Auswahltexte stammen aus den Sprachschlüsseln text_mn_searching und text_mn_nomatches.

Verwandt: @mentions-Demo, Konfigurationsreferenz.