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

Что такое Web Editor API?

Web Editor API — это способ добавить редактор документов МойОфис на сайт или в свое веб-приложение. Через API вы не только встраиваете редактор, но и управляете им из своего кода.

Как использовать API​

Есть несколько вариантов использования Web Editor API:

  • Настройте вид и функции редактора, интегрируйте его в свое приложение.
  • Создавайте надстройки, чтобы добавить новые функции или интеграции.

Как встроить редактор​

  1. Подключите библиотеку:
import { EditorBuilder } from '@nct/web-editor-api';
  1. Добавьте элемент для редактора в HTML:
<div id="editor-container"></div>
  1. Создайте экземпляр редактора с настройками и запустите:
const container = document.getElementById('editor-container');
const api = await new EditorBuilder()
    .withAutonomousMode()
    .withLicenseToken('xxx.xxx.xxx')
    .withLocale('ru-RU')
    .mount(container, 'http://localhost:9002/');

Редактор готов к работе и управлению через API. Теперь осталось открыть документ в редакторе.

  1. Открытие документа в редакторе:
await api.openDocument({ filename: 'file.docx', content: fileContentBuffer });

Документ открыт в редакторе! Пользователь может его редактировать.

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

После открытия документа в редакторе получите объект editorApi для управления самим редактором или plugins для управления надстройками:

const { openDocument } = await editorBuilder.mount(container);

const { editorApi, plugins } = await openDocument({ filename: 'file.docx', ... });

Пример: добавьте свою вкладку на панель инструментов редактора.

editorApi.ui.ribbon.addTab({...});

Возможности editorApi смотрите в документации EditorApi.

Другой пример: подключение надстройки.

plugins.startPlugin('my-plugin', pluginJsCodeAsString);

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

надстройки, входящие в дистрибутив

Дистрибутив редактора содержит несколько готовых надстроек, которые вы можете использовать в редакторе.
Этот список приведен в статье «Загрузка готовых надстроек»

Ссылки на подробные инструкции: