Миграция автономного редактора на Web Editor API

Что изменилось

Раньше нужно было ручное управление iframe. Теперь редактор сам создаёт iframe и настраивается через builder-паттерн.

	Раньше	Сейчас
Интеграция	Сложная, требует развёртывания сервера; Многоступенчатая установка	Быстрая, через npm и JavaScript API + Простая настройка
Кастомизация UI	Ограниченная настройка, нет поддержки пользовательских элементов UI	Гибкое управление интерфейсом, добавление вкладок, кастомные панели
Надстройки и расширения	Нет встроенной поддержки надстроек; Ограниченная расширяемость	Надстройка на JS через onInit + Система расширений и событий
Документация	PDF-файлы, мало живых примеров	Современная, с примерами
Обновления	Требует скачивания и ручного обновления всех компонентов	npm update одной командой
Гибкость архитектуры	Отдельный модуль для управления автономным редактированием подразумевающий лишь ограниченное расширение	Модульная, легко наращивать функциональность

Создаём контейнер для редактора

Раньше:

<iframe
    ref={iframeRef}
    name="editor"
    className="editor"
    src={amrUrl.href}
    onLoad={onIframeLoad}
    allow="clipboard-read; clipboard-write"
/>

Сейчас:

<div ref={containerRef} style={{ width: '100%', height: '100%' }} />

В коде:

// Создаем ссылку на контейнер
const containerRef = useRef(null);

// В JSX возвращаем контейнер
return (
    <div className="editor-container">
        <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
    </div>
);

// При инициализации передаем контейнер в метод mount()
const webEditorApi = await new EditorBuilder()
    .withAutonomousMode()
    .withLicenseToken('xxx.xxx.xxx') // укажите свой лицензионный ключ
    .mount(containerRef.current, 'http://localhost:9002');

примечание

Настройка разрешений происходит через EditorBuilder.

Настройка и запуск редактора

Раньше нужно было:

1. Создать объект редактора после загрузки iframe:

const amrEditorApi = new AmrEditApi(editorIframe, origin);

2. Открыть документ и передать все параметры сразу:

const docInfo = await amrEditorApi.openDocument({
    content: arrayBuffer,
    filename: 'Hello world',
    lang: 'ru-RU',
    mode: OPEN_MODE_FOR_EDIT.readonly,
    userName: 'Test user',
    userPermissions: { canCopy: false, canPrint: false },
});

Новый способ — два этапа

1. Конфигурация и монтирование:

const openDocumentApi = await new EditorBuilder()
    .withAutonomousMode()
    .withLicenseToken('xxx.xxx.xxx')
    .withLocale('ru-RU')
    .withOpeningMode('view')
    .withUserName('Test user')
    .mount(container, 'http://localhost:9002');

warning

После mount() редактор готов, но документ ещё не открыт.

2. Открытие документа

const { editorApi } = await openDocumentApi.openDocument({
    content: arrayBuffer,
    filename: 'Hello world'
});

Работа с документом

После открытия появляется полный API. Тип документа доступен так:

const type = editorApi.document.type;

Главное

• Редактор теперь может сам создавать iframe.

• Конфигурируйте через builder — это проще и безопаснее.

• Монтируйте, потом открывайте документ.

• Полный API для работы с документом доступен после открытия.

Интеграция стала удобнее и понятнее.