Interface: DocumentApi

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

Предоставляет методы для манипуляции содержимым, работы с выделением, масштабированием, буфером обмена и другими операциями, общими для всех типов документов.

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

Remarks

Иерархия типов документов:

• DocumentApi — базовый интерфейс (текущий)
• extends DocumentApi — текстовые документы (Word)
• extends DocumentApi — таблицы (Excel)
• extends DocumentApi — презентации (PowerPoint)

Общие свойства и методы:

• selection — работа с выделением текста/элементов
• zoom — управление масштабом документа
• clipboard — работа с буфером обмена
• insertContent() — вставка текста/HTML
• insertImage() — вставка изображений
• blur() — потеря фокуса

Example

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

const docApi = editorApi.document;

// Определить тип документа
switch (docApi.type) {
  case 'text':
    // Используйте методы TextDocumentApi
    const pages = await (docApi as TextDocumentApi).pages.getCount();
    break;

  case 'spreadsheet':
    // Используйте методы SpreadsheetDocumentApi
    ...
    break;

  case 'presentation':
    // Используйте методы PresentationDocumentApi
    ...
    break;
}

See

• TextDocumentApi — для работы с текстовыми документами
• SpreadsheetDocumentApi — для работы с таблицами
• PresentationDocumentApi — для работы с презентациями
• SelectionApi — для работы с выделением
• ClipboardApi — для работы с буфером обмена

Extended by

• TextDocumentApi
• SpreadsheetDocumentApi
• PresentationDocumentApi

Methods

blur()

blur(): void

Срабатывает событие потери фокуса (blur) для документа.

Используется для завершения редактирования и применения изменений, когда нужно переместить фокус на другой элемент управления.

Returns

void

void

Remarks

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

• После завершения редактирования для применения последних изменений
• Когда нужно закончить редактирование и переместить фокус на кнопку/панель
• Для скрытия курсора редактирования
• Для срабатывания событий blur в надстройках, слушающих фокус

Обратите внимание:

• blur() не сохраняет документ, только применяет форматирование
• Редактор не потеряет свои данные, фокус вернётся на кнопку/элемент UI

Example

// После редактирования в документе переместить фокус
await editorApi.document.insertContent('Новый текст');
editorApi.document.blur();

// Теперь фокус на кнопке "Сохранить"
document.querySelector('button.save')?.focus();

// Завершить редактирование при клике на кнопку "Готово"
editorApi.ui.ribbon.registerButton({
  id: 'doneBtn',
  title: 'Готово',
  onClick: () => {
    editorApi.document.blur();
    console.log('Редактирование завершено');
  }
});

See

SelectionApi — для работы с выделением перед blur()

---

insertContent()

insertContent(content, contentType?): Promise<void>

Вставляет содержимое в текущую позицию курсора.

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

Parameters

content

string

Строка с содержимым для вставки

contentType?

ContentType

Формат содержимого (по умолчанию plain/text)

Returns

Promise<void>

Promise, резолвится после успешной вставки

Remarks

Поддерживаемые форматы:

Формат	Описание	Использование
plain/text	Обычный текст без форматирования	Вставка простого текста
html	HTML-разметка (вставляется в <div/>)	Вставка с форматированием

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

• HTML должен быть валидным
• Некоторые элементы могут не поддерживаться в режиме view
• Стили могут быть переопределены правилами редактора

Example

Вставка простого текста

await editorApi.document.insertContent('Привет, мир!');

Вставка текста с форматированием (HTML)

await editorApi.document.insertContent(
  `<p><b>Важно:</b> <em>Это форматированный текст</em></p>`,
  'html'
);

Вставка сложного содержимого со стилями

await editorApi.document.insertContent(
  `<div style="background-color: #f0f0f0; padding: 10px; border-radius: 4px;">
     <h3 style="color: #234567; margin-top: 0;">Заголовок</h3>
     <p>Содержимое с форматированием</p>
   </div>`,
  'html'
);

See

ContentType — описание всех поддерживаемых форматов

---

insertImage()

insertImage(file): void

Вставляет изображение в текущую позицию курсора.

Parameters

file

File

Объект File с изображением (png, jpg, gif, svg, и т.д.)

Returns

void

Remarks

Поддерживаемые форматы:

• PNG (image/png)
• JPEG (image/jpeg)
• BMP (image/bmp)
• GIF (image/gif)
• SVG (image/svg+xml)

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

• Максимальный размер файла зависит от конфигурации редактора
• Изображение автоматически масштабируется до размера страницы/ячейки
• Некоторые форматы могут быть перекодированы

Example

Вставка изображения из File Input

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files?.;
  if (file?.type.startsWith('image/')) {
    editorApi.document.insertImage(file);
  }
});

Вставка изображения из Blob (например, скриншот, загруженное изображение)

async function insertImageFromUrl(imageUrl: string) {
  const response = await fetch(imageUrl);
  const blob = await response.blob();

  const filename = imageUrl.split('/').pop() || 'image.png';
  const file = new File([blob], filename, { type: blob.type });

  editorApi.document.insertImage(file);
}

Вставка изображения с canvas (рисунок, диаграмма)

function insertCanvasAsImage(canvas: HTMLCanvasElement) {
  canvas.toBlob((blob) => {
    if (blob) {
      const file = new File([blob], 'canvas-image.png', { type: 'image/png' });
      editorApi.document.insertImage(file);
    }
  });
}

See

ClipboardApi — если нужно получить изображение из буфера обмена

Properties

clipboard

clipboard: ClipboardApi

API для работы с буфером обмена (копирование, вставка, вырезание).

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

Remarks

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

• Копировать: clipboard.copy()
• Вырезать: clipboard.cut()
• Вставить: clipboard.paste()

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

• Требует разрешения на доступ к буферу обмена (может быть заблокировано браузером)
• Может требовать пользовательского разрешения в некоторых браузерах

See

• ClipboardApi — полное описание методов работы с буфером обмена
• IframeSandboxConfig — как настроить разрешения iframe

Example

// Скопировать содержимое в буфер обмена
await editorApi.document.clipboard.copy();

// Вставить содержимое из буфера обмена
await editorApi.document.clipboard.paste();

// Вырезать выделение в буфер обмена
await editorApi.document.clipboard.cut();

---

selection

selection: SelectionApi

API для работы с выделением текста или элементов в документе.

Позволяет получать текущее выделение, устанавливать новое выделение, очищать выделение. Полезно для операций с выделенным контентом или программного выделения.

Remarks

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

• Получить текущее выделение: selection.getSelectionAsText()

See

SelectionApi — полное описание методов работы с выделением

Example

// Получить текущее выделение
const selection = await editorApi.document.selection.getSelectionAsText();
console.log('Выделено:', selection);

---

zoom

zoom: ZoomApi

API управления масштабированием (zoom) документа.

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

Remarks

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

• Получить текущий масштаб: zoom.getZoomLevel()
• Установить масштаб: zoom.setZoomLevel(150) (процент)

See

ZoomApi — полное описание методов управления масштабом

Example

// Получить текущий масштаб
const zoom = await editorApi.document.zoom.getZoomLevel();
console.log('Масштаб:', zoom + '%');

// Установить масштаб 150%
await editorApi.document.zoom.setZoomLevel(150);