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

Interface: EditorApi

Центральный интерфейс для взаимодействия с редактором документов.

EditorApi предоставляет полный доступ ко всем функциям редактора: управление UI, работа с документом, подписка на события и создание обработчиков. Используется в надстройках и хост-приложениях.

Remarks​

Структура EditorApi:

  • EditorApi.ui — управление пользовательским интерфейсом
  • EditorApi.document — работа с содержимым документа (тип зависит от документа)
  • EditorApi.events — подписка на события редактора
  • EditorApi.createCallback — создание обработчиков для событий

Типичные сценарии:

  • Добавление кастомных UI-компонентов через ui
  • Чтение и изменение документа через document (с типизацией по типу документа)
  • Реагирование на события через events
  • Создание действий пользователя через createCallback

Example​

Базовое использование в надстройке: доступна глобальная переменная editorApi

export default {
    onInit: () => {
        // 1. Добавить UI-элемент
        editorApi.ui.ribbon.addTab({
            id: 'myPlugin',
            title: 'Надстройка'
        });

        // 2. Подписаться на события
        editorApi.events.subscribe('documentChange', (payload) => {
            console.log('Документ изменён');
        });

        // 3. Работать с документом (в зависимости от типа)
        if (editorApi.document.type === 'text') {
           // функции документа
        }
    }
}

Определение типа документа на runtime

const type = editorApi.document.type;

if (type === 'text') {
    // TypeScript понимает, что docApi: TextDocumentApi
    // функции документа
} else if (type === 'spreadsheet') {
    // TypeScript понимает, что docApi: SpreadsheetDocumentApi
    // функции таблиц
}

Создание обработчиков для действий

const myActions = {
    copy: editorApi.createCallback(async () => {
        await editorApi.document.clipboard.copy();
        console.log('Выделенный в документе фрагмент скопирован в буфер');
    }),
    paste: editorApi.createCallback(async () => {
        await editorApi.document.clipboard.paste();
    })
};

See​

Methods​

createCallback()​

createCallback<Payload>(callback): Callback<Payload>

Создаёт обработчик события (callback) для использования в UI-компонентах.

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

Type Parameters​

Payload​

Payload = void

Parameters​

callback​

(arg) => void

Функция-обработчик, получающая payload события

Returns​

Callback<Payload>

Объект Callback для использования в UI или регистрации действий

Remarks​

Когда использовать:

  • Для регистрации действий в UI-элементах (кнопки, пункты меню)
  • Для связи UI и бизнес-логики
  • Для создания переиспользуемых обработчиков

Generic параметр:

  • Payload = void — тип данных, которые обработчик получает при вызове
  • Оставьте void, если не нужны параметры
  • Укажите тип для типизированных параметров

Example​

Обработчики без параметров

const saveCallback = editorApi.createCallback(() => {
    console.log('Пользователь нажал "Сохранить"');
    // Выполнить сохранение
});

editorApi.ui.ribbon.addButton({
    id: 'saveBtn',
    title: 'Сохранить',
    onClick: saveCallback
});

Обработчики с параметрами

interface ExportPayload {
    format: 'pdf' | 'docx' | 'html';
}

const exportCallback = editorApi.createCallback<ExportPayload>((payload) => {
    console.log('Экспорт в формат:', payload.format);
    // Выполнить экспорт
});

editorApi.ui.contextMenu.addItem({
    id: 'exportPdf',
    title: 'Экспортировать в PDF',
    onClick: exportCallback,
    payload: { format: 'pdf' }
});

See​

  • Callback — описание интерфейса Callback
  • EditorUiApi — как использовать callback в UI-элементах

Properties​

document​

document: TextDocumentApi | SpreadsheetDocumentApi | PresentationDocumentApi | PdfDocumentApi

API работы с содержимым и структурой открытого документа.

Конкретный интерфейс зависит от типа документа (текст, таблица, презентация). Используйте свойство type для определения типа на runtime.

Remarks​

Поддерживаемые типы документов:

Общие операции:

  • Получение содержимого документа
  • Вставка текста, таблиц, объектов
  • Работа с выделением
  • Работа с буфером обмена

See​

Example​

Определение типа документа и работа

const docApi = editorApi.document;

switch (docApi.type) {
    case 'text':
        // функции документа
        break;

    case 'spreadsheet':
        // функции таблиц
        break;

    case 'presentation':
        // функции презентаций
        break;

    case 'pdf':
        // функции в режиме просмотра PDF
        break;
}

events​

events: EditorEventsApi

API подписки на события редактора и реагирования на них.

Позволяет отслеживать изменения документа, выделения, состояния редактора и реализовывать динамическую логику в ответ на эти события.

Remarks​

Основные события:

  • documentChange — документ был изменён
  • selectionChange — выделение пользователя изменилось
  • viewportChange — область просмотра изменилась
  • error — произошла ошибка в редакторе

See​

Example​

// Подписаться на изменение документа
const unsubscribe = editorApi.events.subscribe('documentChange', (payload) => {
    console.log('Документ изменён:', payload.changeInfo);
});

// Отписаться
unsubscribe();

// Подписаться на ошибки
editorApi.events.subscribe('error', (payload) => {
    console.error('Ошибка редактора:', payload.error);
});

ui​

ui: EditorUiApi

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

Позволяет регистрировать и управлять кастомными UI-компонентами: панель инструментов, контекстное меню, боковые панели, модальные окна, уведомления.

See​

  • EditorUiApi — подробное описание всех методов управления UI
  • RibbonApi — для работы с панелью инструментов
  • ContextMenuApi — для работы с контекстным меню
  • SidebarApi — для работы с боковыми панелями

Example​

// Добавить вкладку в панель инструментов
editorApi.ui.ribbon.addTab({
    id: 'myTab',
    title: 'Мои функции'
});

// Добавить пункт в контекстное меню
editorApi.ui.contextMenu.addItems([{
    id: 'myAction',
    title: 'Выполнить действие'
}]);

// Показать уведомление
editorApi.ui.toasts.showToast({ id, content: 'Операция выполнена' });