Встраивание рабочего пространства

Вы можете интегрировать ONLYOFFICE Apps или его части в собственное веб-приложение, позволяя пользователям создавать и отправлять документы прямо с вашего сайта.

Для этого используйте ONLYOFFICE Apps SDK на основе JavaScript, который позволяет разработчикам использовать все возможности ONLYOFFICE Apps с помощью api.js.

Чтобы встроить на сайт все рабочее пространство, определенную комнату или папку,

1. Откройте раздел Инструменты разработчика, нажав ссылку Инструменты разработчика на левой панели в любом разделе (Файлы, Комнаты).

   Обратите внимание

   По умолчанию доступ к разделу Инструменты разработчика включен для всех пользователей, кроме гостей, поэтому любой пользователь может открыть эту страницу и создавать собственные интеграции.

2. В разделе Инструменты разработчика перейдите в раздел SDK для встраивания.

3. На странице SDK для встраивания перейдите в раздел Add the allowed domains for this workspace, введите адрес сервиса, в который вы хотите встроить рабочее пространство или подключить его, и нажмите значок +. Указывайте только доменное имя, без путей URL и лишних символов. Добавленные домены отображаются под полем, и каждый из них можно удалить, нажав значок x.

   Обратите внимание

   Если вы используете серверную версию, сначала необходимо перевести рабочее пространство на HTTPS. Вы можете воспользоваться нашими инструкциями в разделе Установка.

   

4. В разделе Select a mode for embedding your workspace выберите один из предлагаемых режимов: Apps, Публичная комната, Редактор, Просмотр, Селектор комнат, Окно выбора файлов, Пользовательские, Инструмент загрузки.

   • Apps — встроить все рабочее пространство, чтобы пользователи могли работать со всеми комнатами, файлами и настройками.
   • Публичная комната — встроить публичную комнату, чтобы пользователи могли без регистрации просматривать, редактировать, комментировать или рецензировать все хранящиеся там документы.
   • Редактор — встроить редактор, чтобы пользователи могли редактировать файл из соответствующей комнаты.
   • Просмотр — встроить просмотрщик, чтобы пользователи могли открыть файл из соответствующей комнаты для просмотра.
   • Селектор комнат — встроить селектор комнат, чтобы пользователи могли получить доступ к любой комнате из списка доступных. Вы можете встроить все типы комнат или выбрать нужные в меню Расширенные настройки отображения -> Отобразить тип комнаты. Выберите нужный вариант: все типы, публичная комната, комната для совместной работы, виртуальная комната данных, пользовательская комната.
   • Окно выбора файлов — встроить окно выбора файлов, чтобы пользователи могли получить доступ к любому файлу из списка доступных.
   • Пользовательские — вручную настроить параметры встраивания вашего рабочего пространства.
   • Инструмент загрузки — встроить инструмент загрузки, чтобы пользователи могли загружать документы в ваше рабочее пространство без регистрации. Выберите допустимые типы файлов для загрузки. Доступны следующие настройки:

     • Идентификатор папки назначения — выберите папку рабочего пространства, в которую будут сохраняться загруженные файлы. Используйте окно выбора папки, чтобы найти и выбрать целевое расположение.

     • Режим загрузки — выберите, что смогут загружать пользователи:

       • Файлы — разрешить загрузку отдельных файлов.
       • Папки — разрешить загрузку целых структур папок.

     • Количество — определите, сколько элементов можно загрузить за один раз:

       • Один файл — ограничить загрузку одним файлом за сеанс.
       • Несколько файлов — разрешить загрузку нескольких файлов одновременно.

     • Лимиты на загрузку — задайте Максимальный размер файла и единицу измерения (КБ, МБ или ГБ), чтобы ограничить размер отдельного загружаемого файла.

     • Доступные типы файлов — выберите одну или несколько категорий, чтобы ограничить типы загружаемых файлов: Документы, Таблицы, Презентации, Изображения, Видео, Аудио, Архивы, PDF.

     • Текст кнопки — измените подпись на кнопке загрузки (по умолчанию Upload).

     • Вспомогательный текст — измените дополнительную подсказку под кнопкой (по умолчанию or drop file here).

     • Настройка отображения — задайте Ширину, Высоту (в % или px) и Идентификатор кадра, используемый для определения встроенного фрейма на вашей странице.

       

5. Нажмите кнопку Начать настройку.

6. Настройте доступные параметры отображения, которые зависят от выбранного режима. Например, для режима Пользовательские доступны следующие параметры: ширина, высота, идентификатор кадра, элементы интерфейса (левое меню, заголовок, настройка столбцов, кнопка действия, поиск, фильтр и сортировка, а также заголовок (только для мобильных устройств)), настройки отображения данных (выберите раздел, комнату или папку, которые хотите показать) и расширенные настройки отображения, такие как поисковый запрос, параметр сортировки, порядок сортировки, количество файлов и папок на одной странице, отображаемая страница, отображение столбцов в строке файла.

7. Просмотрите результат в разделе Просмотр.

8. Перейдите на вкладку Код для вставки и скопируйте сгенерированный код на вкладке HTML, JavaScript или NPM. Для NPM приводятся команды для установки и импорта пакета, а также объект конфигурации с необходимыми параметрами и HTML-элемент, в который нужно вставить фрейм SDK.

9. Встройте скопированный код на свой сайт.

Страница SDK для встраивания также включает раздел Примеры интеграции с готовыми интеграциями для популярных платформ, таких как Zoom и WordPress. Нажмите Просмотреть все коннекторы, чтобы просмотреть полный список доступных интеграций.

Подробнее о SDK для встраивания см. на сайте api.onlyoffice.com.