triggerTemplate

Beschreibung

Optional. Passt an, wie RichText Einträge im Vorschlags-Dropdown rendert, das durch einen triggers-Eintrag geöffnet wird

Standardmäßig zeigt das Dropdown den label-Wert jedes Eintrags als einfachen Text an. Verwenden Sie triggerTemplate, um aufwendigere Zeilen zu rendern – zum Beispiel einen Avatar zusammen mit einem Namen und einer E-Mail-Adresse.

Verwendung

function triggerTemplate({ data, trigger }) {
    return "HTML template of the suggestion item";
};

Parameter

Die Callback-Funktion nimmt ein Objekt mit den folgenden Parametern entgegen:

• data - das aktuelle Vorschlags-Element ({ id, label, url }, zuzüglich beliebiger benutzerdefinierter Felder, die Sie der data-Quelle des Triggers hinzufügen)
• trigger - das Trigger-Zeichen, das das Dropdown geöffnet hat ("@", "#" usw.)

Tipp

Die Standard-Breite des Dropdowns beträgt 160px. Wenn Sie für Ihr Template mehr Platz benötigen, fügen Sie den übergeordneten Selektor .wx-editor vor dem Selektor ein:

.wx-editor .wx-suggest-anchor {
    width: 220px;
}

Beispiel

Der folgende Code-Ausschnitt konfiguriert zwei Trigger: @ für Erwähnungen und # für Tags. Verwenden Sie triggerTemplate, um den trigger-Wert auszuwerten und jedes Dropdown unterschiedlich zu rendern. Für das @-Dropdown gibt das Template eine benutzerdefinierte HTML-Zeile mit einem Avatar (data.image), einem Nickname (data.label) und einem vollständigen Namen (data.name) zurück. Für den #-Trigger verwendet das Template den label:

const { template, Richtext } = richtext;

new Richtext("#root", {
    triggers: [
        { trigger: "@", data: people },
        { trigger: "#", data: tags }
    ],
    triggerTemplate: template(obj => {
        if (obj.trigger === "@") {
            return `<div className="user">
                <img className="user-avatar" src="${obj.data.image}"/>
                <div className="user-nickname">${obj.data.label}</div>
                <div className="user-name">${obj.data.name}</div>
            </div>`;
        }
        // andere Trigger (zum Beispiel "#") verwenden den einfachen Label
        return obj.data.label;
    })
});

Änderungsprotokoll: Die Eigenschaft wurde in v2.1 hinzugefügt

Verwandte Beispiele:

• RichText. Benutzerdefiniertes Dropdown-Template pro Trigger
• RichText. Emoji-Autovervollständigung

Verwandte Artikel: Erwähnungen und Tags