Interface: PresentationDocumentApi
API для работы с презентациями в редакторе.
Специализированный интерфейс для работы с презентационными документами (PowerPoint). Наследует общий функционал от DocumentApi и предоставляет методы специфично для презентаций.
Позволяет управлять слайдами, работать с элементами дизайна, навигацией и содержимым презентации.
Remarks
Иерархия интерфейсов:
DocumentApi (базовый интерфейс)
├── TextDocumentApi (текстовые документы)
├── SpreadsheetDocumentApi (таблицы)
├── PresentationDocumentApi (презентации) ← текущий интерфейс
└── PdfDocumentApi (PDF-просмотр)
Наследуемый функционал от DocumentApi:
- DocumentApi.selection — выделение элементов на слайде
- DocumentApi.clipboard — копирование/вырезание/вставка
- DocumentApi.zoom — масштабирование презентации
- DocumentApi.insertContent — вставка текста на слайд
- DocumentApi.insertImage — вставка изображений
- DocumentApi.blur — снятие фокуса
Example
Определение типа документа и работа с презентацией
const docApi = editorApi.document;
if (docApi.type === 'presentation') {
// TypeScript типизирует docApi как PresentationDocumentApi
// Теперь доступны методы презентаций
...
}
Автоматическая типизация в switch
switch (editorApi.document.type) {
case 'presentation':
// TypeScript автоматически сужает тип до PresentationDocumentApi
...
break;
}
See
- DocumentApi — базовый интерфейс с общим функционалом
- TextDocumentApi — для работы с текстовыми документами
- SpreadsheetDocumentApi — для работы с таблицами
Extends
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();
// Завершить редактирование при клике на кнопку "Готово"
const readyButton: Button = {
id: 'doneBtn',
title: 'Готово',
onClick: () => {
editorApi.document.blur();
console.log('Редактирование завершено');
}
};
See
SelectionApi — для работы с выделением перед blur()
Inherited from
focus()
focus():
void
Срабатывает событие возобновления перехвата фокуса (focus) для документа.
Используется для возврата к редактированию, когда нужно вернуться к редактированию документа
Returns
void
void
Remarks
Когда использовать:
- Для возврата к редактированию документа
- Для срабатывания событий focus в надстройках, слушающих фокус
Example
// После редактирования в документе переместить фокус
await editorApi.document.insertContent('Новый текст');
editorApi.document.blur();
// Теперь фокус на кнопке "Сохранить"
document.querySelector('button.save')?.focus();
// Надо вернуться к редактированию
editorApi.document.focus();
See
SelectionApi — для работы с выделением после вызова focus()
Inherited from
insertContent()
insertContent(
content,contentType?):Promise<void>
Вставляет содержимое в текущую позицию курсора.
Если в документе есть выделение, оно будет заменено новым содержимым.
Parameters
content
string
Строка с содержимым для вставки
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 — описание всех поддерживаемых форматов
Inherited from
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);
}
See
ClipboardApi — если нужно получить изображение из буфера обмена
Inherited from
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();
Inherited from
selection
selection:
SelectionApi
API для работы с выделением текста или элементов в документе.
Позволяет получать текущее выделение, устанавливать новое выделение, очищать выделение. Полезно для операций с выделенным контентом или программного выделения.
Remarks
Типичные операции:
- Получить текущее выделение:
selection.getSelectionAsText()
See
SelectionApi — полное описание методов работы с выделением
Example
// Получить текущее выделение
const selection = await editorApi.document.selection.getSelectionAsText();
console.log('Выделено:', selection);
Inherited from
type
type:
presentation
Тип документа: презентация.
Используется для runtime проверки типа документа.
Remarks
Это свойство переопределяет базовый type из DocumentApi
и явно указывает, что это презентационный документ.
Значение:
- Всегда равно
'presentation' - Используется для типизации в TypeScript (type guards)
- Позволяет разными методами работать с разными типами документов
Example
if (editorApi.document.type === 'presentation') {
// Здесь editorApi.document гарантированно PresentationDocumentApi
await editorApi.document.slides.add();
}
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);