Настройка панели инструментов

Панель инструментов редактора дает пользователям легкий доступ к элементам управления.

Вы можете создать собственную вкладку и разместить там необходимые инструменты.

Пример добавления своей вкладки в верхнюю панель:

// Регистрация новой вкладки
editorApi.ui.ribbon.addTab([{
    id: 'plugin1:my-tab',                 // Уникальный идентификатор вкладки
    title: 'Моя вкладка',                 // Название вкладки, отображаемое пользователю
}]);

Можно добавлять кнопки, поля ввода и другие компоненты непосредственно внутрь вашей вкладки.

Порядок отображения вкладки

Порядок отображения вкладок в интерфейсе редактора определяется значением свойства order при регистрации вкладки.

Чем меньше значение order, тем ближе вкладка к левому краю.

Стандартные значения порядка для первых двух вкладок:

• Первая вкладка (order: 10)
• Вторая вкладка (order: 20)

Чтобы ваша вкладка появилась между второй и третьей, вам достаточно задать ей порядок больше 20, но меньше следующего стандартного значения (обычно оно равно 30). Например, 25:

// Настройка вкладки с порядком отображения
editorApi.ui.ribbon.addTab([{
    id: 'plugin1:my-tab',                 // Уникальный идентификатор вкладки
    title: 'Моя вкладка',                 // Название вкладки, отображаемое пользователю
    order: 25,                            // Задаём позицию между второй и третьей вкладками
}]);

Группировка кнопок

Для группировки кнопок в верхней панели инструментов используется свойство groups.

Каждая группа представляет собой отдельный контейнер, внутри которого располагаются элементы управления (например, кнопки).

Пример, как создаются две группы элементов на вкладке:

const doActionButton: Button = {
    ...Constants.ribbon.doAction,
    type: 'button',
    icon: Icons.hyperlink,
    iconType: 'svg',
    onClick: callbacks.doAction,
};

const settingsButton: Button = {
    ...Constants.ribbon.settings,
    type: 'button',
    icon: 'Settings',
    onClick: callbacks.openSettings,
};

const aboutButton: Button = {
    ...Constants.ribbon.about,
    type: 'button',
    icon: 'Question',
    groupingId: 'about',
    onClick: callbacks.showAbout,
};

// Настройка вкладки с группой кнопок
editorApi.ui.ribbon.addTab([{
    id: 'plugin1:my-tab',                 // Уникальный идентификатор вкладки
    title: 'Моя вкладка',                 // Название вкладки, отображаемое пользователю
    groups: [
        {   // Первая группа кнопок
            id: 'plugin1:custom_group_1',
            type: 'controls',
            controls: [doActionButton, settingsButton]
        },
        {   // Вторая группа кнопок
            id: 'plugin1:custom_group_2',
            type: 'controls',
            controls: [aboutButton]
        }
    ],
}]);

• Каждая кнопка должна иметь уникальное имя (id), которое привязывается к группе.
• Свойство type: controls означает, что данная группа предназначена для размещения кнопок или других интерактивных элементов.
• Элементы каждой группы определяются массивом controls.

Итоговая структура будет выглядеть следующим образом:

1. Группа 1: Кнопки doActionButton и settingsButton
2. Разделитель
3. Группа 2: Кнопка aboutButton

Эти группы визуально отделены друг от друга линиями-разделителями, что облегчает восприятие и использование интерфейса пользователями.

Кнопка с выпадающим списком

API помимо стандартных кнопок также позволяет создавать кнопки с выпадающими списками (dropdown).

Такой подход удобен, когда одна кнопка объединяет несколько похожих операций, что помогает оптимизировать пространство на панели инструментов.

Создание кнопки с выпадающим списком осуществляется путем задания параметра type: button-with-dropdown, который определяет элемент как кнопку с раскрывающимся перечнем возможных действий при нажатии.

Ниже представлен пример настройки такой кнопки:

// Настройка вкладки с группой кнопок
editorApi.ui.ribbon.addTab([{
    id: 'plugin1:my-tab',                 // Уникальный идентификатор вкладки
    title: 'Моя вкладка',                 // Название вкладки, отображаемое пользователю
    groups: [
        {   
            id: 'plugin1:custom_group_1',
            type: 'controls',
            controls: [
                {
                    id: 'demo-plugin:ribbon:copy-buttons',             // Идентификатор кнопки
                    title: 'Copy / Paste',                             // Подпись кнопки
                    type: 'button-with-dropdown',                      // Тип элемента — кнопка с выпадающим меню
                    groupingId: 'copy-paste',                          // Опциональный идентификатор группы, объединяющий пункты меню
                    icon: 'Cut',                                       // Значок рядом с названием кнопки
                    items: [actions.cut, actions.copy, actions.paste], // Массив пунктов меню
                },
            ],
        }
    ],
}]);