toolbar

Описание

Необязательный. Включает панель инструментов и позволяет задавать/настраивать кнопки, отображаемые в ней

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

toolbar?: boolean | Array<string | { id: string, type: string, label?: string, tooltip?: string, css?: string, handler?: () => any }>;

Доступные кнопки панели инструментов

В панели инструментов RichText можно указать следующие кнопки:

Кнопка	Описание
undo	Отменяет последнее действие пользователя.
redo	Повторяет ранее отменённое действие.
style	Позволяет выбирать стили текста (например, заголовки, абзац и т.д.).
font-family	Изменяет шрифт выделенного текста.
font-size	Изменяет размер выделенного текста.
bold	Применяет полужирное форматирование к выделенному тексту.
italic	Применяет курсивное форматирование к выделенному тексту.
underline	Подчёркивает выделенный текст.
strike	Применяет зачёркивание.
subscript	Форматирует текст как подстрочный.
superscript	Форматирует текст как надстрочный.
text-color	Изменяет цвет текста.
background-color	Изменяет цвет фона (выделения) текста.
align	Устанавливает выравнивание текста (по левому краю, по центру, по правому краю, по ширине).
indent	Увеличивает отступ текстового блока.
outdent	Уменьшает отступ абзаца.
line-height	Изменяет межстрочный интервал (высоту строки).
quote	Форматирует текст как цитату.
bulleted-list	Включает/выключает маркированный список.
numbered-list	Включает/выключает нумерованный список.
link	Вставляет гиперссылку.
image	Вставляет изображение.
line	Вставляет горизонтальную линию.
clear	Удаляет всё форматирование выделенного текста.
print	Открывает диалог печати.
fullscreen	Переключает полноэкранный режим.
mode	Переключает режимы отображения (классический/документ).
shortcuts	Отображает список доступных сочетаний клавиш.
separator	Добавляет визуальный разделитель между группами кнопок панели инструментов.

Эти строки можно использовать для настройки кнопок панели инструментов следующим образом:

new richtext.Richtext("#root", {
    toolbar: [
        "bold",
        "italic",
        "separator",
        // другие кнопки
    ],
    // другие свойства конфигурации
});

Пользовательские кнопки панели инструментов

Пользовательские кнопки задаются в виде объектов со следующими параметрами:

• type — (обязательный) задаёт тип пользовательского элемента управления. Доступны следующие типы: "button", "richselect", "colorpicker"
• id — (необязательный) идентификатор пользовательского элемента управления (не должен совпадать с существующим идентификатором элемента)
• label — (необязательный) подпись кнопки (сочетается с иконкой)
• tooltip — (необязательный) всплывающая подсказка при наведении курсора (если не указана, используется значение из "label")
• css — (необязательный) имя CSS-класса, назначаемого элементу управления (поддерживаемые классы по умолчанию: wx-primary, wx-secondary)
• handler — (необязательный) функция обратного вызова, выполняемая при нажатии кнопки

new richtext.Richtext("#root", {
    toolbar: [
        // кнопки (строки представляют только кнопки)
        "bold",
        "italic",
        // предопределённые кнопки (пользователь не может задавать дополнительные параметры (подписи, подсказки, опции и т.д.), поэтому только ({ type: "button", id: string })
        {
            type: "button",
            id: "fullscreen",
        },
        // пользователь должен указать правильный тип для использования предопределённого элемента управления (например, richselect/colorpicker)
        // несовпадающие типы будут проигнорированы (не добавлены в панель инструментов)
        {
            type: "richselect", // type: "button" - неверно, будет проигнорировано
            id: "mode",
        },
        // пользовательские кнопки (поддерживаемые параметры описаны ниже)
        // пользователь может задавать только пользовательские кнопки (richselect/colorpicker пока не поддерживаются)
        {
            type: "button",
            id: "some",
            label: "Some",
            handler: () => {/* пользовательская логика */}
        },
        {
            type: "button",
            id: "other",
            icon: "wxo-help",
            label: "Other",
            tooltip: "Some tooltip",
            handler: () => {/* пользовательская логика */}
        }
    ],
    // другие свойства конфигурации
});

Скрытие панели инструментов

Чтобы скрыть панель инструментов, установите свойство toolbar в значение false:

new richtext.Richtext("#root", {
    toolbar: false
    // другие свойства конфигурации
});

Конфигурация по умолчанию

const defaultToolbarButtons = {
    "undo",
    "redo",
    "separator",
    "style",
    "separator",
    "font-family",
    "font-size",
    "separator",
    "bold",
    "italic",
    "underline",
    "strike",
    "separator",
    "text-color",
    "background-color",
    "separator",
    "align",
    "line-height",
    "outdent",
    "indent",
    "separator",
    "bulleted-list",
    "numbered-list",
    "quote",
    "separator",
    "link",
    "image",
    "separator",
    "clear",
    "separator",
    "fullscreen",
    "mode"
};

Совет

Элементы управления панели инструментов по умолчанию экспортируются виджетом RichText и доступны через richtext.defaultToolbarButtons.

// инициализация RichText
new richtext.Richtext("#root", {
    toolbar: [
        ...richtext.defaultToolbarButtons,
        {
            type: "button",
            id: "btn1", // идентификатор кнопки (не должен совпадать с существующими идентификаторами, если нужна пользовательская логика)
            icon: "wxo-help", // иконка кнопки (сочетается с подписью)
            css: "rounded", // имя CSS-класса, назначаемого элементу управления (поддерживаемые классы по умолчанию: wx-primary, wx-secondary)
            label: "Custom button", // подпись кнопки (сочетается с иконкой)
            tooltip: "Some tooltip", // всплывающая подсказка при наведении курсора (если не указана, используется значение из "label")
        }
    ]
    // другие свойства конфигурации
});

Пример

// инициализация RichText
new richtext.Richtext("#root", {
    toolbar: [
        "bold",
        "italic",
        "separator",
        // пользовательские кнопки (ниже используются все поддерживаемые параметры)
        // пользователь может задавать только пользовательские кнопки (richselect/colorpicker пока не поддерживаются)
        {
            type: "button",
            id: "btn1", // идентификатор кнопки (не должен совпадать с существующими идентификаторами, если нужна пользовательская логика)
            icon: "wxo-help", // иконка кнопки (сочетается с подписью)
            css: "rounded", // имя CSS-класса, назначаемого элементу управления (поддерживаемые классы по умолчанию: wx-primary, wx-secondary)
            label: "Custom button", // подпись кнопки (сочетается с иконкой)
            tooltip: "Some tooltip", // всплывающая подсказка при наведении курсора (если не указана, используется значение из "label")
            handler: () => ..., // пользовательская логика, привязанная к этой кнопке
        }
    ]
    // другие свойства конфигурации
});

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

Связанные статьи: Конфигурация

Связанный пример: RichText. Пользовательский элемент управления и упрощённая панель инструментов