Пример использования SEK API

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

// создание iframe
 <iframe id="amr" src={http://some.site.name}>

 // инициализация API, подключение скрипта для работы с SDK
 import { AmrEditApi } from 'amrApi.js';
 const origin = window.location.origin;

 const amrIframe = document.getElementById('amr');
 const amrApi = new AmrEditApi(amrIframe, origin);

 function onHasChanges(hasChanges) {
 this.hasChanges = hasChanges;
 if (hasChanges) {
 console.log(DOCUMENT_STATE.changed);
 } else {
 console.log(DOCUMENT_STATE.saved);
 }
 }
 function onError(errorMessage) {
 console.log('Ошибка открытия документа', err);
 }
 if (typeof(amrApi.onChange === 'function')) {
 // отслеживание изменений в документе
 amrApi.onChange(({ hasChanges }) => {
 onHasChanges(hasChanges);
 });
 }
 // обработка ошибки
 amrApi.onError(onError);
 amrApi.onPageReloadRequested(() => window.location.reload());

 // открытие документа
 const documentData = new UintArray(...);
 const docInfo = await amrApi.openDocument({
 content: documentData,
 filename: 'filename',
 lang: 'ru-RU',
 mode: 'default',
 });

 window.console.log('opened', docInfo);

По окончании редактирования пользователь может получить измененное содержимое документа:

const documentData = editorAPI.saveDocument('OXML')
 console.log('Document saved', documentData);

Если пользователь не сохранил изменения, то можно предотвратить потерю изменений в документе с помощью предупреждения. Для этого можно использовать событие onBeforeUnload и проверку флага hasChanges. Значение флага hasChanges можно получить из обработчика onChange. Реализуйте обработчик onBeforeUnloadв componenDidUpdate. Пользователь увидит уведомление перед закрытием или перезагрузкой документа с несохраненными изменениями.

Пример установки состояния флага hasChanges и добавления/удаления обработчика для события beforeunload:

if (this.hasChanges) {
 window.addEventListener("beforeunload", onBeforeUnload, {
 capture: true,
 });
 } else {
 window.removeEventListener("beforeunload", onBeforeUnload, {
 capture: true,
 });
 }

 function onBeforeUnload(event) {
 event.preventDefault();
 return (event.returnValue = 'You have unsaved changes. Are you sure you want to leave this page?');
 }

После проверки значения hasChanges, запрашиваем пользователя о несохраненных изменениях с помощью confirm.

reload() {
 if (this.hasChanges) {
 const result = confirm('You have unsaved changes. Are you sure you want to leave this page?');
 if (result) {
 window.removeEventListener("beforeunload", this.onBeforeUnload, {
 capture: true,
 });
 } else {
 return;
 }
 }
 // reload iframe
 }

Ограничения

После сбоя документ не сохраняется автоматически, окно редактора не восстанавливается.
Бинарные форматы документов (.doc, .xls, .ppt и другие) не поддерживаются.
Для повторного открытия документа необходима перезагрузка iframe.

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

Ограничения