Перейти к основному содержимому
Версия: Next

Interface: CustomModal

Интерфейс параметров информационного модального окна.

Описывает все аспекты окна: идентификатор, заголовок, содержимое и кнопку подтверждения. Все параметры находятся в одном объекте для полной прозрачности сценария.

Remarks​

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

  • Передайте объект этого типа в ModalsApi.showModal
  • Все свойства (кроме базовых от расширяемых интерфейсов) опциональны
  • Если okButton не указан, окно покажет стандартную кнопку "ОК"

Наследуемые свойства:

  • От BaseUiElement: id (обязательно), onClick (опционально)
  • От HasTitle: title (обязательно)
  • От HasContent: content (обязательно), contentType (опционально)

Extends​

Properties​

content​

readonly content: string

Содержимое элемента, предназначенное для отображения пользователю.

Remarks​

Формат:

  • Если contentType = 'plain/text' — обычная строка текста
  • Если contentType = 'html' — строка с HTML разметкой

Ограничения:

  • Не должна быть пустой (может вызвать проблемы отображения)
  • Максимальный размер зависит от браузера (обычно несколько MB)
  • HTML содержимое фильтруется в целях безопасности

Example​

// Обычный текст
{
    content: 'Это простой текст',
    contentType: 'plain/text'
}

// HTML
{
    content: '<h2>Заголовок</h2><p>Абзац текста</p>',
    contentType: 'html'
}

Inherited from​

HasContent.content

contentType?​

readonly optional contentType: UiContentType

Тип содержимого, определяющий как интерпретировать поле content.

Remarks​

Значения:

  • 'plain/text' — содержимое это обычный текст

    • Все символы отображаются как есть

  • 'html' — содержимое это HTML разметка

    • HTML теги интерпретируются и отображаются
    • Небезопасные теги и атрибуты удаляются

Default​

'plain/text'

Example​

// HTML — теги интерпретируются
{
    content: 'Текст с <strong>жирным</strong> словом',
    contentType: 'html'
}
// Отобразится: "Текст с жирным словом" (жирное)

// Без указания — используется plain/text
{
    content: 'Простое содержимое'
    // Эквивалент: contentType: 'plain/text'
}

See​

UiContentType — возможные значения

Inherited from​

HasContent.contentType

id​

readonly id: string

Уникальный идентификатор элемента пользовательского интерфейса.

Remarks​

Требования:

  • Должен быть уникален среди всех элементов UI редактора
  • Не может быть пустой строкой
  • Не может содержать спецсимволы (кроме :, -, _)
  • Чувствителен к регистру (case-sensitive)

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

  • Идентификация элемента при обновлении
  • Идентификация элемента при событиях
  • Ссылка на элемент в других местах кода

Соглашения:

'plugin:button:save'          // Кнопка надстройки
'plugin:input:username'       // Поле ввода
'plugin:panel:settings'       // Панель параметров
'plugin:group:formatting'     // Группа элементов

Example​

// Создание элемента с уникальным id
{
    id: 'plugin:button:submit',
    title: 'Отправить',
    type: 'button'
}

// Использование id для обновления
editorApi.ui.updateUiNodes([
    {
        id: 'plugin:button:submit',
        disabled: false,
    }
]);

// Использование id для удаления
editorApi.ui.ribbon.removeTabs(['plugin:ribbon:tab']);

Inherited from​

BaseUiElement.id

okButton?​

readonly optional okButton: ModalButton

Параметры кнопки подтверждения ("ОК").

Позволяет кастомизировать название кнопки и назначить обработчик события.

Remarks​

По умолчанию:

  • Кнопка обозначена как "ОК"
  • Нажатие закрывает окно без дополнительных действий

Кастомизация:

  • Передайте объект ModalButton для изменения названия и логики
  • Если не указан, используются значения по умолчанию

Example​

Стандартная кнопка (используется по умолчанию)

editorApi.ui.modals.showModal({
    id: 'plugin:modal:info',
    title: 'Информация',
    content: 'Готово!'
});
// okButton не указан - окно покажет кнопку "ОК"

Кастомная кнопка с переопределенным названием

editorApi.ui.modals.showModal({
    id: 'plugin:modal:info',
    title: 'Информация',
    content: 'Готово!',
    okButton: {
        title: 'Закрыть'  // Вместо "ОК"
    }
});

Кнопка с обработчиком нажатия

editorApi.ui.modals.showModal({
    id: 'plugin:modal:info',
    title: 'Информация',
    content: 'Готово!',
    okButton: {
        title: 'Понял',
        onClick: editorApi.createCallback(() => {
            console.log('Пользователь нажал кнопку');
        })
    }
});

See​

ModalButton — структура параметров кнопки

title​

readonly title: string

Название/заголовок элемента пользовательского интерфейса.

Remarks​

Требования:

  • Должен быть локализирован (переведён на язык пользователя)
  • Должен быть понятным и кратким
  • Не должен быть пустой строкой
  • Может содержать спецсимволы (кроме < и >)

Примеры:

  • "Сохранить документ"
  • "Экспортировать в PDF"
  • "Параметры надстройки"
  • "Об приложении"

Советы:

  • Используйте глаголы для действий (Сохранить, Удалить)
  • Используйте существительные для панелей (Параметры, Информация)
  • Сохраняйте названия короткими
  • Будьте конкретными (не просто "Опции", а "Параметры надстройки")

Example​

{
    id: 'button:save',
    title: 'Сохранить',
    type: 'button'
}

Inherited from​

HasTitle.title