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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

export default {
    onInit() {
    const doActionButton = {
        ...Constants.ribbon.doAction,
        type: 'button',
        icon: Icons.hyperlink,
        iconType: 'svg',
        onClick: callbacks.doAction,
    };
    const settingsButton = {
        ...Constants.ribbon.settings,
        type: 'button',
        icon: 'Settings',
        onClick: callbacks.openSettings,
    };
    const aboutButton = {
        ...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, который определяет элемент как кнопку с раскрывающимся перечнем возможных действий при нажатии.

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

export default {
    onInit() {
        // Настройка вкладки с группой кнопок
        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], // Массив пунктов меню
                    },
                ],
            }
        ],
        }]);
    },
};