Плагин полноэкранного режима для CMS Studio

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

Создание плагина Copy-icon

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

Для получения дополнительной информации о хосте плагинов перейдите по этой ссылке.

В данном случае, следуя упомянутому примеру с Vanilla App, мы начнем с проекта на основе шаблона “Web Blog” с именем "Editorial".

1. Сначала нужно настроить структуру папок, где будет находиться файл JS нашего плагина. Мы будем придерживаться структуры, описанной здесь. В нашем случае, CATEGORY будет apps, а NAME - example-vanilla.

Начните с создания файла описания с именем cms-plugin.yaml для вашего плагина в локальной папке и plugin.id присвойте значение ru.dc.cms.plugin.vanilla. Затем настройте следующую структуру папок:

<plugin-folder>/

  cms-plugin.yaml

  authoring/

    static-assets/

      plugins/

        ru/

          dc/

             cms/

               plugin/

                 vanilla/

                    apps/

                      example-vanilla/

Copy-icon

Мы разместим JS-файл, реализующий плагин полноэкранного режима, в папке vanilla-plugin. В нашем примере <plugin-folder> расположен  по пути /users/myuser/myplugins/vanilla-plugin.

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

 type: site

  id: ru.dc.cms.plugin.vanilla

  name: Vanilla Plugin Host Example

  tags:

    - test

  version:

    major: 4

    minor: 0

    patch: 0

  description: A simple plugin host example

  website:

    name: Plugin Host Vanilla Example

    url: https://github.com/dccms/authoring-ui-plugin-examples/tree/master/examples/app-vanilla

  media:

    screenshots:

      - title: DC CMS

        description: DC CMS Example Plugin

        url: "https://raw.githubusercontent.com/dccms/site-plugin-example/master/.dc/logo.svg"

  developer:

    company:

      name: DC CMS

      email: info@dccms.com

      url: https://dccms.com

  license:

    name: MIT

    url: https://opensource.org/licenses/MIT

  dcCmsVersions:

    - major: 4

      minor: 0

      patch: 1

  dcCmsEditions:

    - community

    - enterprise

Copy-icon

2. Скопируем JS-файл index.js, который можно найти здесь.

3. После того как вы разместили файл вашего плагина, вы можете приступить к установке плагина для тестирования или отладки. Это можно сделать с помощью команды cms-cli copy-plugin. Для того чтобы убедиться, что команды cms-cli работают правильно, необходимо установить соединение с DC CMS с помощью команды add-environment. После установки соединения вы сможете установить плагин в проект с именем editorial, запустив следующее:

./cms-cli copy-plugin -e local -s editorial --path /users/myuser/myplugins/vanilla-plugin

Copy-icon

4. Чтобы посомтреть на наш плагин в действии, введите в браузере следующее:  http://localhost:8080/studio/plugin?site=editorial&type=apps&name=example-vanilla&pluginId=ru.dc.cms.plugin.vanilla

Vanilla App

Этот пример демонстрирует базовое приложение, которое запускается на странице хоста плагинов.

Данный пример предполагает, что ваш проект назван "Editorial". Если ваш проект имеет другое имя, откорректируйте путь и URL соответствующим образом.

Вы можете установить плагин из локальных источников с помощью DC CMS CLI или используя API /studio/api/2/marketplace/copy в инструментах типа Postman. В обоих методах используйте следующее тело JSON:

{

  "siteId": "ВАШ_ИДЕНТИФИКАТОР_САЙТА",

  "path": "/Users/your/path/to/this/repo"

}

Copy-icon

Чтобы просмотреть приложение после развертывания на DC CMS, перейдите по адресу: http://localhost:8080/studio/plugin?site=editorial&pluginId=ru.dc.cms&type=examples&name=vanilla. Замените PLUGIN_ID на идентификатор плагина, указанный в файле описания вашего плагина.

Связанные статьи Copy-icon

Плагины

Хост плагина

Примеры плагинов

Документация для разработчиков