triggerTemplate

Описание

Необязательный. Настраивает отображение элементов в выпадающем списке подсказок, открываемом записью triggers

По умолчанию выпадающий список отображает поле label каждого элемента в виде обычного текста. Используйте triggerTemplate, чтобы отображать более насыщенные строки — например, аватар вместе с именем и электронной почтой.

Использование

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

Параметры

Функция обратного вызова принимает объект со следующими параметрами:

• data — текущий элемент подсказки ({ id, label, url }, а также любые пользовательские поля, добавленные в источник data триггера)
• trigger — символ триггера, открывшего выпадающий список ("@", "#" и т.д.)

Подсказка

Ширина выпадающего списка по умолчанию составляет 160px. Если вашему шаблону нужно больше пространства, добавьте родительский элемент .wx-editor перед селектором:

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

Пример

Следующий фрагмент кода настраивает два триггера: @ для упоминаний и # для тегов. Используйте triggerTemplate для расширения значения trigger, чтобы отображать каждый выпадающий список по-разному. Для выпадающего списка @ шаблон возвращает пользовательскую HTML-строку с аватаром (data.image), ником (data.label) и полным именем (data.name). Для триггера # шаблон использует 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>`;
        }
        // другие триггеры (например, "#") используют обычный label
        return obj.data.label;
    })
});

Журнал изменений: Свойство добавлено в v2.1

Связанные примеры:

• RichText. Пользовательский шаблон выпадающего списка для каждого триггера
• RichText. Автодополнение эмодзи

Полезные статьи: Упоминания и теги