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

Миграция облачного редактора на Web Editor API

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

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

WopiApiWeb Editor API
Кастомизация UIОграниченная настройка, нет поддержки пользовательских элементов UIГибкое управление интерфейсом, добавление вкладок, кастомные панели
ДокументацияPDF-файлы, мало живых примеровСовременная, с примерами
Гибкость архитектурыОтдельный модуль для управления облачным редактированием подразумевающий лишь ограниченное расширениеМодульная, единый подход, легко наращивать функциональность

Управление редактором​

Раньше, через WopiApi:​

Создавался объект управления редактором после загрузки iframe

const wopiApi = new WopiApi(officeFrame.contentWindow, '*')

Теперь, через Web Editor API​

Создание объекта управления для уже загруженного iframe

const { editorApi } = await new EditorBuilder()
    .withCloudMode()
    .withLicenseToken('xxx.xxx.xxx') // укажите свой лицензионный ключ
    .mount(iframe, 'http://localhost:9002');

Создание объекта управления с конфигурацией и монтированием iframe

const { editorApi } = await new EditorBuilder()
    .withCloudMode()
    .withLicenseToken('xxx.xxx.xxx')
    .withIframeOrigin('http://localhost:9002')
    .withHostOrigin('http://localhost:9001')
    // В качестве второго параметра передается адрес, по которому доступен веб редактор.
    // В данном случае указан адрес локально запущенного редактора.
    .mount(containerForIframe, 'http://localhost:9002');
примечание

Подробнее про настройку и запуск
Настройка происходит через with- методы EditorBuilderCloud.

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

WopiApiWebEditorApi
API events
Событие начала инициализации редактора.
wopiApi.onInit(() =>
  console.log('WOPIAPI: init')
)
editorApi.events.subscribe('init',
  () => 
    console.log('WebEditorApi: init')
)
Событие готовности редактора.
wopiApi.onReady((res) =>
  console.log('WOPIAPI: ready', res)
)
editorApi.events.subscribe('ready',
  (res) =>
    console.log('WebEditorApi: ready', res)
)
Событие ошибки в редакторе.
wopiApi.onError((e) =>
  console.log('WOPIAPI: error', e)
)
editorApi.events.subscribe('error',
  (e) =>
    console.log('WebEditorApi: error', e)
)
Событие начала принудительного сохранения документа.
wopiApi.onSaveStart(() =>
  console.log('WOPIAPI: saveStart')
)
editorApi.events
  .subscribe('saveStart', () =>
    console.log('WebEditorApi: saveStart')
  )
Событие окончания принудительного сохранения документа.
wopiApi.onSaveEnd((res) =>
  console.log('WOPIAPI: saveEnd', res)
)
editorApi.events
  .subscribe('saveEnd', (res) =>
    console.log('WebEditorApi: saveEnd', res)
)
примечание

API подписки на события редактора EditorApi#events

API actions
Уведомление о необходимости перезагрузить страницу с редактором. Инициируется редактором.
wopiApi.onReloadAction(() =>
  window.location.reload()
)
const { editorApi } = new Builder()
  .withHostRequests({ reload: () =>
    window.location.reload()
  })
Уведомление о необходимости редиректа страницы с редактором. Инициируется редактором.
wopiApi.onRedirectAction((url) =>
  window.location.replace(url)
)
const { editorApi } = new Builder()
  .withHostRequests({ redirect: (url) =>
    window.location.replace(url)
  })
Запрос принудительного сохранения документа. Инициируется внешним ресурсом.
wopiApi.saveByRequest()
  .then(() =>
    console.log('WOPIAPI: saved')
  )
editorApi.saveByRequest()
  .then(() =>
    console.log('WebEditorApi: saved')
  )
Запрос отключения перехвата фокуса редактором.
wopiApi.blurAction().then(() =>
  console.log('WOPIAPI: blurred')
)
editorApi.document.blur()
  .then(() =>
    console.log('WebEditorApi: blurred')
  )
примечание

Принудительное сохранение документа saveByRequest
Отключение перехвата фокуса редактором blur
Обработчики действий, запрашиваемых редактором withHostRequests

PluginsAPI
Интерфейсы wopiApi.pluginsApi и webEditorApi.plugins совпадают.
await wopiApi.pluginsApi
  .startPlugin(pluginId, pluginCode)
const { plugins } = new EditorBuilder().withAutonomousMode().mount(iframe, url);
plugins.startPlugin(pluginId, pluginCode)
примечание

PluginsApi

Итоги​

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

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

  • Указывайте hostOrigin для большей безопасности.

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

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