Поиск по сайту:

Как создать собственный плагин для документации ONLYOFFICE

Кратко: в этой статье вы узнаете, как создать собственный плагин для Документов ONLYOFFICE и опубликовать его на официальной торговой площадке плагинов, доступной начиная с версии 7.2.

ONLYOFFICE Docs — это не обычный офисный пакет в традиционном понимании. Конечно, он позволяет вам делать то же, что и другие офисные пакеты: создавать и редактировать документы, электронные таблицы и презентации, делиться ими и совместно редактировать их в Интернете, создавать заполняемые формы, просматривать и конвертировать PDF-файлы и так далее.

Однако есть способ сделать ONLYOFFICE еще более мощным. Здесь имеются в виду сторонние плагины, то есть дополнительные программные средства, расширяющие стандартные функциональные возможности пакета. Например, плагины позволяют подключать сторонние сервисы или добавлять новые элементы пользовательского интерфейса.

Как создать плагин для документов ONLYOFFICE

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

Процесс создания плагина можно разделить на семь шагов, которым необходимо внимательно следовать:

  • Предварительные мероприятия.
  • Кодирование.
  • Настройка стиля плагина.
  • Локализация (необязательно).
  • Подготовка.
  • Тестирование.
  • Публикация на торговой площадке плагинов.

Давайте углубимся в разработку плагина.

Шаг 1. Форк репозитория магазина плагинов

Прежде всего, вам необходимо войти в свою учетную запись GitHub или создать ее, если у вас ее нет. После этого вам необходимо создать форк репозитория торговой площадки плагинов ONLYOFFICE, доступный по следующему URL-адресу:

https://github.com/ONLYOFFICE/onlyoffice.github.io.

В результате у вас появится еще один репозиторий, и его URL-адрес будет примерно таким:

https://github.com/YOUR-USERNAME/ONLYOFFICE/onlyoffice.github.io

После успешного создания репозитория торговой площадки плагинов необходимо создать сайт GitHub Pages из этого репозитория для целей тестирования. Если вы не знаете, как это сделать, обратитесь к официальному руководству GitHub.

Теперь, когда у вас есть собственный сайт GitHub Pages, пришло время клонировать его форк на свой компьютер.

Наконец, вам нужно создать папку для вашего будущего плагина по адресу:

onlyoffice.github.io/sdkjs-plugins/content/.

Вот и все. Вы только что выполнили все необходимые предварительные действия и можете переходить к следующему шагу.

Шаг 2. Напишите код для вашего плагина

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

Если коротко, то плагин ONLYOFFICE — это папка с несколькими файлами. Для корректной работы вашего плагина вам необходимо создать три файла:

  • config.json – это файл конфигурации плагина, содержащий информацию обо всех важных данных. В этом файле есть некоторые параметры, необходимые для регистрации плагина в редакторах ONLYOFFICE. Посетите эту страницу в официальной документации API, чтобы прочитать полное описание каждого параметра.
  • Код плагина (файл .js) – это сам файл плагина, содержащий код JavaScript вашего плагина. Этот файл описывает операции, которые выполняет плагин, и то, как они выполняются. Прочтите это руководство по API, чтобы узнать, как это работает.
  • index.html – это точка входа вашего плагина, которая соединяет файлы config.json и plugin.js. Посмотрите на этот пример, чтобы понять, как это должно выглядеть.

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

Чтобы написать хороший рабочий код для вашего плагина, вам необходимо знать необходимые методы и события.

Шаг 3. Настройте стиль вашего плагина

Написать код для вашего плагина недостаточно. Вам также необходимо настроить его стиль, чтобы он выглядел как неотъемлемая часть редакторов ONLYOFFICE. Для этого просто добавьте таблицу стилей ONLYOFFICE в описанный выше файл index.html:

<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">

Вы можете добавлять кнопки, элементы управления вводом, элементы управления метками, загрузчики и другие элементы.

Например, чтобы добавить поле со списком в свой плагин, вы можете использовать функцию select2:

<select id="select_example" class="" ></select> 
$('#select_example').select2({     
data : [{id:0, text:'Item 1'}, {id:1, text:'Item 2'}, {id:2, text:'Item 3'}],     
minimumResultsForSearch: Infinity,     
width : '120px' 
});

Вставленное поле со списком будет выглядеть так:

Более подробную информацию об элементах стиля ONLYOFFICE можно найти здесь.

Шаг 4. Локализуйте свой плагин (необязательно)

Вы можете пропустить этот шаг, если собираетесь создать плагин только для англоязычных пользователей. Однако, если вы хотите, чтобы ваш плагин был доступен на других языках, вы можете создать папку переводов в каталоге плагина и поместить в него файлы .json для всех языков, которые вы хотите использовать.

Прочтите официальную документацию по API, чтобы узнать, как правильно локализовать ваш плагин.

Шаг 5. Подготовьте плагин для публикации в ONLYOFFICE Marketplace

Чтобы улучшить внешний вид вашего плагина до того, как он станет доступен на торговой площадке ONLYOFFICE, вам необходимо добавить окно О программе с кратким описанием вашего плагина, его версии, имени разработчика и т. д.

Например, это окно О программе плагина Фоторедактор:

Чтобы иметь возможность создать такое окно для вашего плагина, следуйте этим инструкциям.

Также вам необходимо создать значки для вашего плагина и поместить их в папку ресурсов. В общем, вам нужно 8 значков, чтобы ваш плагин корректно отображался в магазине плагинов ONLYOFFICE: 4 значка (масштаб 125%, 150%, 175% и 200%) для светлой и темной тем интерфейса.

Кроме того, вы можете создать файл readme и поместить его в основную папку плагина. Этот файл может содержать любую информацию, которую вы хотите, чтобы другие пользователи знали: описание основных функций вашего плагина, инструкции по установке, известные проблемы и ошибки и т. д.

Теперь ваш плагин готов, и вы можете протестировать его должным образом перед публикацией на рынке.

Шаг 6. Проверьте плагин ONLYOFFICE Docs

Теперь пришло время поместить в папку плагина все файлы, которые вы уже создали по инструкции выше. Затем переместите папку плагина в удаленный репозиторий и протестируйте его в настольных редакторах ONLYOFFICE. Для этого вы можете запустить настольное приложение в режиме отладки.

В Linux вы можете открыть терминал с помощью CTRL+ALT+T. После этого введите путь к ONLYOFFICE Desktop Editors, добавьте пробел и укажите --ascdesktop-support-debug-info:

"/opt/onlyoffice/desktopeditors/DesktopEditors" --ascdesktop-support-debug-info

Проверьте свой плагин и его возможности.

Если все в порядке, вы также можете протестировать свой плагин в веб-версии пакета ONLYOFFICE — ONLYOFFICE Docs. Другими словами, ваш плагин можно добавить как новое расширение.

Чтобы создать соответствующее расширение, вам необходимо открыть файл onlyoffice.github.io/store/plugin-dev/extension/inject.js и указать путь к вашему плагину на сайте GitHub Pages в поле Переменная URL_TO_PLUGIN:

var URL_TO_PLUGIN = "https://YOUR-USERNAME.github.io/onlyoffice.github.io/sdkjs-plugins/content/your-plugin/"

Папка onlyoffice.github.io/store/plugin-dev/extension — это необходимое вам расширение. Просто загрузите его в свой веб-браузер, запустите Документы ONLYOFFICE и найдите свой плагин в Менеджере плагинов на вкладке Плагины на верхней панели инструментов. Вот подробное руководство о том, как добавить плагин в веб-браузер.

Если ваш плагин работает так, как задумано, вы можете перейти к последнему шагу.

Шаг 7. Отправьте плагин в ONLYOFFICE Marketplace.

Поздравляем! Вы прошли процесс создания плагина и теперь можете сделать его доступным для других пользователей. Для этого вы можете создать запрос на включение из своего форка в репозиторий ONLYOFFICE по адресу:

https://github.com/ONLYOFFICE/onlyoffice.github.io

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

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