Общая информация о плагинах

В этой статье вы узнаете, что такое плагины и как их создавать и устанавливать в DC CMS.

Что такое плагины?

Плагин содержит в себе одно или несколько расширений для DC CMS, которые могут:

  1. Расширять функциональность CMS Studio:

    • интегрировать виджеты редактирования CMS Studio, влияющие на боковую панель и другие элементы пользовательского интерфейса
    • внедрять встроенные приложения, отображаемые на отдельных страницах в CMS Studio
    • добавлять дополнительные расширения для формы типа контента, включая источники данных и компоненты
    • реализовывать серверный код и сервисы, управляющие расширениями пользовательского интерфейса CMS Studio

  2. Расширять функциональность CMS Engine и проекта/веб-приложения:

    • вводить новые типы контента вместе с их Groovy-контроллерами и шаблонами FreeMarker
    • интегрировать REST API и/или серверный код
    • добавлять сторонние интеграции в ваше веб-приложение

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

Плагины создания контента

Плагины создания контента (authoring plugins) - это те плагины, которые позволяют расширять CMS Studio с помощью виджетов пользовательского интерфейса, приложений и серверных служб.

Виджеты и автономные приложения

В CMS Studio существует две категории плагинов пользовательского интерфейса (UI):

  1. UI виджеты: предназначены для интеграции в различные разделы пользовательского интерфейса CMS Studio.

  2. Самостоятельные (автономные) приложения: независимые приложения, работающие в пределах страницы Plugin Host.

Плагины могут взаимодействовать с клиентскими компонентами CMS Studio (React), сервисами и утилитами, используя два основных метода:

  • При использовании npm вы можете добавить пакет @cms/studio-ui с помощью команды yarn add или npm i.

  • Во время выполнения в браузере CMS Studio доступ к функционалу осуществляется через глобальный объект window.dccms:

    • Следующие пространства имен доступны через window.cms:
      • libs предоставляет доступ к сторонним технологиям, которые обеспечивают работу пользовательского интерфейса CMS Studio
        • React
        • ReactDOM/Client
        • MaterialUI
        • ReactRedux
        • ReactIntl
        • createEmotion
        • ReduxToolkit (createAction)
        • RxJS
        • Emotion (createEmotion)
    • components включает в себя компоненты пользовательского интерфейса CMS Studio.
    • icons содержит иконки пользовательского интерфейса CMS Studio.
    • utils cодержит утилиты для выполнения задач, таких как отправка AJAX-запросов, манипулирование объектами, массивами, строками, путями, типами контента и др.
    • services cодержит функции для вызова API CMS Studio, категоризованные по модулям (например, пользователи, группы, сайты, аутентификация, типы контента и т. д.).
    • getStore возвращает хранилище Redux, обеспечивающее функционирование пользовательского интерфейса.

Рекомендуется разрабатывать приложения и виджеты с использованием React и Material UI для оптимальной интеграции и хорошего пользовательского опыта, учитывая, что пользовательский интерфейс DC CMS разработан с использованием этих технологий. Этот подход позволяет использовать все компоненты, утилиты и API CMS Studio.

Сервисы

Через плагины редактирования вы можете добавлять свои собственные скрипты REST-сервисов API.

Например, вы можете захотеть создать API для подключения и/или мониторинга служб AWS и создать расширение пользовательского интерфейса (UI) для использования ваших API.

Delivery Plugins

Delivery Plugins позволяют вам расширить проект DC CMS, добавив типы контента (и все, что связано с типами контента) и REST API.

Типы контента

У вас есть возможность добавлять типы контента вместе с их определениями, Groovy-контроллерами, шаблонами Freemarker и связанными ресурсами.

Например, такой delivery-плагин, как компонент видео с YouTube. Этот плагин включает в себя определение типа контента, шаблон Freemarker, а также компоненты JavaScript и CSS, необходимые для отображения типа контента. После установки расширения, которое включает этот тип контента, авторы получают возможность легко интегрировать компонент видео с YouTube в свой контент, что позволяет легко добавлять видео.

Скрипты

Скрипты позволяют вам добавлять API в ваше проектное приложение DC CMS.

Шаблоны

Интегрируя delivery-плагины, вы можете внедрить шаблоны Freemarker в ваш проект. Эти шаблоны служат основой для визуализации определенного типа контента или действуют как точка подключения Freemarker-шаблона. То есть у вас есть возможность добавлять шаблоны для визуализации типов контента вашего расширения или улучшения функциональности страниц с использованием точек подключения (хуков) Freemarker-шаблонов.

Точки подключения (хуки) Freemarker-шаблонов

DC CMS предоставляет встроенный механизм, известный как "хук", который позволяет включать разметку и определять макросы для плагинов с использованием шаблонов Freemarker. Когда плагин использует один из этих шаблонов, он автоматически интегрируется в проект.

Поддерживаются следующие шаблоны:

  1. definitions.ftl: используется для определения макросов для плагина.

  2. head.ftl: используется для добавления разметки в HTML-элемент <head>

  3. body_top.ftl: позволяет добавлять разметку в начало HTML-элемента <body>

  4. body_bottom.ftl: упрощает включение разметки в конце HTML-элемента <body>

Поместите шаблон/ы в папку {папка_вашего_плагина}/delivery/templates в вашем плагине, как показано ниже:

{папка_вашего_плагина}/
  cms-plugin.yaml
  .dc/
    screenshots/
      default.png
  delivery/
    templates/
      definitions.ftl
      head.ftl
      body_top.ftl
      body_bottom.ftl\
Copy-icon

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

Для создания плагина вам понадобятся:

  1. файлы плагина
  2. файл дескриптора плагина cms-plugin.yaml

Файлы вашего плагина могут включать в себя различные форматы, включая файлы JavaScript, XML, скрипты Groovy, изображения, файлы CSS и многое другое. Конкретные типы файлов зависят от типа разрабатываемого вами плагина. 

Дескриптор плагина DC CMS Copy-icon

Файл cms-plugin.yaml служит хранилищем необходимой информации о вашем плагине: лицензия, поддерживаемые версии DC CMS, а также дополнительные конфигурации и метаданные.

Образец файла дескриптора плагина:

# This file describes a plugin for use in DCCMS

# The version of the format for this file
descriptorVersion: 2

# Describe the plugin
plugin:
  type: site
  id: ru.dc.cms.plugin.test
  name: Project Plugin Example
  tags:
    - test
  version:
    major: 3
    minor: 0
    patch: 1
  description: A simple example for project plugins
  documentation: "https://raw.githubusercontent.com/dccms/site-plugin-example/master/readme.md"
  website:
    name: Plugin Example
    url: https://github.com/dccms/site-plugins-example
  media:
    screenshots:
      - title: DCCMS
        description: DCCMS Example Plugin
        url: "https://raw.githubusercontent.com/dccms/site-plugin-example/master/.dc/screenshots/default.png"
  developer:
    company:
      name: DCCMS
      email: info@cms.com
      url: https://cms.com
  license:
    name: MIT
    url: https://opensource.org/licenses/MIT
  dcCmsVersions:
    - major: 4
      minor: 0
      patch: 0
  dcCmsEditions:
    - community
    - enterprise
  # Option auto-wiring section
  # installation:
Copy-icon

Вот некоторые моменты, которые следует отметить в файле дескриптора:

Поле Обязательное/необязательное Описание
descriptorVersion Обязательное Версия формата для данного файла
plugin.type Обязательное Укажите значение site
plugin.id Обязательное Уникальный id, узнаваемый для людей, которые будут использовать плагин
plugin.name Обязательное Имя, отображаемое в DC CMS Marketplace. Выберите уникальное имя для вашего плагина. Также рекомендуется выбирать осмысленное или узнаваемое имя для вашего плагина. Имя может состоять из нескольких слов.
plugin.version Обязательное Номер версии плагина
plugin.description Необязательное Краткое описание плагина, которое отображается под названием плагина в DC CMS Marketplace
plugin.documentation Необязательное Служит блоком справки для плагина. Он содержит URL-адрес файла документации плагина (должен быть в Markdown), содержащий информацию о том, как использовать /настраивать плагин. Документация появится вместе с плагином в CMS Studio и CMS Marketplace.
plugin.website.url Необязательное Может быть страницей для получения дополнительной информации о вашем плагине или для объявления обновлений, сообщений об ошибках и т.д. из вашего сообщества пользователей.
plugin.media.url Необязательное Местоположение для поиска репрезентативного изображения для плагина. В случае отсутствия явного указания plugin.media.url, путь по умолчанию для поиска репрезентативного изображения для плагина - ../.cms/screenshots/default.png.
plugin.license Необязательное Лицензия, поддерживаемая плагином
plugin.dcCmsVersions Обязательное Содержит информацию о версии или версиях DC CMS, с которыми совместим данный плагин. Важно регулярно обновлять эту информацию.

Для изображений, используемых в файле cms-plugin.yaml,
рекомендуется использовать изображения с соотношением сторон 4:3 (ширина к высоте), например, изображения размером 1200x800.

Автоматическое подключение

DC CMS облегчает автоматическое подключение вашего плагина к соответствующему файлу конфигурации в CMS Studio при установке плагина.

Чтобы включить автоматическое подключение плагина к соответствующему файлу конфигурации в CMS Studio во время установки, добавьте следующий код в ваш файл дексриптора cms-plugin.yaml:

installation:
 - type: preview-app
   parentXpath: //widget[@id='dccms.components.ToolsPanel']
   elementXpath: //plugin[@id='ru.dc.cms.sampleComponentLibraryPlugin.components.reactComponent']
   element:
     name: configuration
     children:
     - name: widgets
       children:
       - name: widget
         attributes:
         - name: id
           value: ru.dc.cms.sampleComponentLibraryPlugin.components.reactComponent
         children:
         - name: plugin
           attributes:
           - name: id
             value: ru.dc.cms.plugin.sidebar
           - name: type
             value: sidebar
           - name: name
             value: react-sample
           - name: file
             value: index.modern.js
Copy-icon

где:

  • installation.type - тип плагина для автоматической установки в CMS Studio. Доступные значения: form-control, form-datasource, preview-app, site-filter и site-context
  • installation.parentXpath - селектор XPath для элемента, в который будет добавлен плагин. Требуется, если тип установки - preview-app.
  • installation.elementXpath - селектор XPath для проверки, присутствует ли уже плагин в конфигурации. Также используется для удаления конфигурации при удалении плагина.
  • installation.element.name - имя элемента, которое должно быть указано в файле конфигурации вашего проекта, чтобы плагин отображался в DC Studio Доступные значения: control (для типа установки form-control), datasource (для типа установки form-datasource), а для типа установки preview-app - начало раздела, в который нужно вставить плагин, например, configuration и т.д.
  • installation.element.children содержит любое количество name и children элементов, описывающих ваш плагин, где:
    • name название того, что описывается, например, plugin или icon
    • children содержит любое количество name и value и может содержать класс (иконку), идентификатор плагина, тип плагина, имя плагина и файлы/папки плагина (местоположение плагина) и соответствующие им значения

Ниже приведены примеры того, как настроить автоматическое подключение различных типов плагинов в CMS Studio.

Пример подключения элемента управления формой:

installation:
  - type: form-control
    elementXpath: //control/plugin[pluginId='ru.dc.cms.plugin.control']
    element:
      name: control
      children:
        - name: plugin
          children:
            - name: pluginId
              value: ru.dc.cms.plugin.control
            - name: type
              value: control
            - name: name
              value: text-input
            - name: filename
              value: main.js
        - name: icon
          children:
            - name: class
              value: fa-pencil-square-o
Copy-icon

Пример подключения источника данных:

installation:
  - type: form-datasource
    elementXpath: //datasource/plugin[pluginId='ru.dc.cms.plugin.datasource']
    element:
      name: datasource
      children:
        - name: plugin
          children:
            - name: pluginId
              value: ru.dc.cms.plugin.datasource
            - name: type
              value: datasource
            - name: name
              value: text-input
            - name: filename
              value: main.js
            - name: icon
              children:
            - name: class
              value: fa-pencil-square-o
Copy-icon

Пример подключения preview-app:

installation:
  - type: preview-app
    parentXpath: //widget[@id='dccms.components.ToolsPanel']
    elementXpath: //plugin[@id='ru.dc.cms.sampleComponentLibraryPlugin.components.reactComponent']
    element:
      name: configuration
      children:
      - name: widgets
        children:
        - name: widget
          attributes:
          - name: id
            value: ru.dc.cms.sampleComponentLibraryPlugin.components.reactComponent
          children:
          - name: plugin
            attributes:
            - name: id
              value: ru.dc.cms.plugin
            - name: type
              value: sidebar
            - name: name
              value: react-sample
            - name: file
              value: index.modern.js
Copy-icon

Пример подключения фильтра сайта:

installation:
  - type: site-filter
    elementXpath: //filter/script[text()='/scripts/filters/plugins/ru/dccms/plugin/filter/myFilter.groovy']
    element:
      name: filter
      children:
        - name: script
          value: '/scripts/filters/plugins/ru/dccms/plugin/filter/myFilter.groovy'
        - name: mapping
          children:
            - name: include
              value: '/**'
Copy-icon

Пример подключения контекста сайта:

installation:
  - type: site-context
    elementXpath: //bean[@id='myBean']
    element:
      name: bean
      attributes:
        - name: id
          value: myBean
        - name: class
          value: plugins.ru.dccms.plugin/context/MyClass
      children:
        - name: property
          attributes:
            - name: name
              value: siteItemService
            - name: ref
              value: dc.siteItemService
Copy-icon

Передача параметров проекту через плагины

Может потребоваться передавать некоторые параметры в проект, а не оставлять их внутри плагина, например, учетные данные AWS, учетные данные Box, учетные данные CommerceTools и т.д. DC CMS поддерживает передачу параметров в проекты из плагинов.

Для включения параметров, которые должны быть переданы проекту через плагин, вы можете обновить файл cms-plugin.yaml, добавив в него следующее:

parameters:
 - label: My Parameter Label
   name: myParam
   type: string
   description: My parameter
   required: true
Copy-icon

где:

  • label: метка, отображаемая для параметра в диалоговом окне создания проекта
  • name: имя параметра в нотации camelCase
  • type: тип параметра (возможные значения: STRING или PASSWORD. По умолчанию STRING.
  • description: описание параметра
  • required: указывает, является ли параметр обязательным. По умолчанию true.

Для использования параметров в скриптах и файлах шаблонов, используйте pluginConfig, например, pluginConfig.getString("PARAM_NAME"), где PARAM_NAME - это имя параметра.

Структура директория Copy-icon

Плагин состоит из группы файлов, которые копируются в репозиторий проекта при установке. Чтобы создать свой собственный плагин, ваши файлы/папки должны быть помещены в папку плагина соответствующего типа, следуя приведенной ниже структуре:

  • cms-plugin.yaml: дескриптор плагина
  • .cms
    • screenshots
      • default.png: репрезентативное изображение плагина по умолчанию, расположенное по пути .cms/screenshots/
  • authoring: содержит все файлы, связанные с расширениями CMS Studio
    • content-types
      • component: содержит файлы конфигурации для компонентов
      • page:содержит файлы конфигурации для страниц
    • static-assets: содержит файлы для плагинов CMS Studio
    • scripts
      • classes: содержит классы Groovy
      • rest: содержит скрипты REST Groovy
  • delivery: содержит все файлы, связанные с расширениями CMS Engine
    • templates: содержит шаблоны Freemarker
    • static-assets: cодержит бинарные файлы
    • scripts
      • classes: содержит классы Groovy
      • components: содержит скрипты Groovy для компонентов
      • controllers: содержит контроллеры Groovy
      • filters: содержит фильтры Groovy
      • pages: содержит скрипты Groovy для страницы
      • rest: содержит скрипты Groovy REST

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

Расположение в репозитории плагина Расположение в репозитории проекта
authoring/content-types/component/* /config/studio/content-types/component/<plugin id path>/*
authoring/content-types/page/* /config/studio/content-types/page/<plugin id path>/*
authoring/static-assets/* /config/studio/static-assets/plugins/<plugin id path>/*
authoring/scripts/classes/* /config/studio/plugins/scripts/classes/<plugin id path>/*
authoring/scripts/rest/* /config/studio/plugins/scripts/rest/<plugin id path>/*
delivery/templates/* /templates/<plugin id path>/*
delivery/static-assets/* /static-assets/<plugin id path>/*
delivery/scripts/classes/* /scripts/classes/<plugin id path>/*
delivery/scripts/components/* /scripts/components/<plugin id path>/*
delivery/scripts/controllers/* /scripts/controllers/<plugin id path>/*
delivery/scripts/filters/* /scripts/filters/<plugin id path>/*

|`delivery/scripts/pages/*`|`/scripts/pages/<plugin id path>/*`|
|`delivery/scripts/rest/*`|`/scripts/rest/<plugin id path>/*`|
Copy-icon

Ваш плагин устанавливается в проект через CMS Marketplace или с помощью команды copy-plugin командной строки интерфейса. Дескриптор вашего плагина, содержащий структуру директория, будет прочитан, а соответствующие файлы плагина скопированы в проект.

Структура директория UI плагинов

Плагины редактирования должны использовать директорий со следующей структурой:
{PLUGIN_DIRECTORY}/authoring/static-assets/{ID}/{CATEGORY}/{NAME}/
где:

  • ID: директорий с названием, соответствующим идентификатору плагина (например, ru.dc.cms.sample)
  • CATEGORY: директорий с названием, соответствующим типу плагина (например, control, datasource, sidebar, app, lib, и т.д.)
  • NAME: директорий с названием, соответствующим названию плагина
    • исходники плагина и/или выходные данные сборки плагина будут размещены здесь.
Пример структуры директория

Ниже расположен пример структуры директория для плагина, у которого в значении pluginId установлено ru.dc.cms.sample:

{your_plugin_folder}/
  cms-plugin.yaml
  .dc/
    screenshots/
      default.png
  authoring/
    static-assets/
      plugins/
        ru/
          dccms/
            sample/
              controls/
                color-picker/
                  main.js
                  style.css
  delivery/
    scripts/
      rest/
        ru/
          dccms/
            sample/
              hello.groovy
    templates/
      ru/
        dccms/
          sample/
            head.ftl
Copy-icon

Создание собственного плагина

Чтобы создать плагин, у вас должен быть файл дескриптора с именем cms-plugin.yaml.

Кроме того, создание плагина требует наличия конкретных файлов плагина. Характер этих файлов зависит от типа плагина, который вы разрабатываете, и может включать в себя файлы JavaScript, файлы шаблонов Freemarker, файлы Groovy, файлы XML и так далее. Затем эти файлы плагина должны быть организованы в структуре директория (как описывалось выше) в соответствии с конкретным типом создаваемого плагина. Например, если ваш плагин принадлежит к типу компонента, соответствующие файлы должны быть размещены по пути authoring/content-types/component.

authoring/
  content-types/
    component/
      <your_component_name>/
        config.xml
        controller.groovy
        form-definition.xml
Copy-icon

DC CMS использует путь по умолчанию для поиска дефолтового репрезентативного изображения плагина - url ../.cms/screenshots/. Вот пример файлов/директория плагина с изображением по умолчанию для презентации плагина:

.cms/
  screenshots/
    default.png
authoring/
  content-types/
    component/
      <your_component_name>/
        config.xml
        controller.groovy
        form-definition.xml
Copy-icon

Переиспользование библиотек на Java в вашем плагине

Некоторые пользователи могут иметь библиотеки, написанные на Java, которые они хотели бы повторно использовать в своем плагине. Чтобы повторно использовать эти библиотеки, выполните следующие действия:

  1. Опубликуйте ваши JAR-файлы в Maven Central.

  2. Загрузите JAR-файлы из Maven с помощью небольшого скрипта на Groovy в вашем плагине с использованием Grapes.

Если JAR доступен в Maven Central:

@Grab(value='com.example:my-java-plugin:1.0.0', initClass=false)
import com.example.java.Plugin // This class is made up, it can be anything
Copy-icon

Если JAR находится в частном репозитории Maven:

@GrabResolver(name='my-repo', root='https://maven.example.com/')
@Grab(value='com.example:my-java-plugin:1.0.0', initClass=false)
import com.example.java.Plugin // This class is made up, it can be anything
Copy-icon

Извлечение активов расширений

На более низком уровне API CMS Studio содержит эндпоинт “getPluginFile”, специально предназначенный для получения файлов, связанных с определенным плагином. Этот API упрощает процесс, автоматически настраивая соответствующие заголовки в зависимости от типа запрашиваемого актива, будь то JavaScript, CSS, изображение и так далее. Кроме того, разработчики имеют доступ к механизмам более высокого уровня, таким как Plugin host, для упрощения загрузки и использования плагинов.

Для ручной загрузки активов из вашего плагина следует использовать следующий URL:

/studio/1/plugin/file?siteId={siteId}&type={yourPluginType}&name={yourPluginName}&file={fileName}
Copy-icon

Если ваше расширение вложено в директорий под определенным идентификатором плагина, необходимо включить аргумент pluginId в URL:

/studio/1/plugin/file?siteId={siteId}&pluginId={yourPluginId}&type={yourPluginType}&name={yourPluginName}&file={fileName}
Copy-icon

Установка плагина Copy-icon

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

  1. установка из CMS Marketplace
  2. установка в режиме разработки из локальной папки CMS Studio

После установки плагина его местоположение будет определено типом созданного вами плагина:

  • {siteRoot}/config/studio/static-assets/plugins/{yourPluginId}/{yourPluginType}/{yourPluginName}/
  • {siteRoot}/config/studio/content-types/component/{yourPluginType}/{yourPluginName}/
  • {siteRoot}/config/studio/content-types/page/{yourPluginType}/{yourPluginName}/
  • {siteRoot}/templates/{yourPluginId}/{yourPluginType}/{yourPluginName}
  • {siteRoot}/static-assets/{yourPluginId}/{yourPluginType}/{yourPluginName}
  • {siteRoot}/scripts/{yourScriptType}/{yourPluginId}/{yourPluginType}/{yourPluginName}

Установка плагина из CMS Marketplace Copy-icon

Как только плагин опубликован в CMS Marketplace, его можно установить с помощью пользовательского интерфейса CMS Studio или REST API.

Чтобы получить доступ к инструменту управления плагинами или использовать REST API для установки плагина, пользователь должен иметь следующие разрешения: list_plugins и install_plugins.

Установка плагина в режиме разработки из локальной папки CMS Studio

Для разработчиков, желающих протестировать свои плагины перед отправкой в CMS Marketplace, DC CMS предоставляет команду CLI под названием copy-plugin, упрощающую установку плагина из локальной папки CMS Studio в проект с использованием cms-cli.

Давайте проиллюстрируем это на примере. Предположим, что у нас есть проект с именем "myeditorial", в котором мы хотим установить плагин, расположенный по пути /Users/myuser/plugins/sidebar-plugin.

Чтобы установить sidebar-plugin в проект "myeditorial", нужно выполнить команду copy-plugin, как показано ниже:

./cms-cli copy-plugin -e local -s myeditorial --path /users/myuser/plugins/sidebar-plugin
Copy-icon

Важно отметить, что соединение с DC CMS должно быть установлено с помощью команды add-environment перед использованием любых команд cms-cli.

Пример создания плагина

Рассмотрим пример создания плагина для типа контента “Компонент” с именем “My Component”.

Сначала мы настроим файл дескриптора cms-plugin.yaml для нашего плагина:

# This file describes a plugin for use in DCCMS

# The version of the format for this file
descriptorVersion: 2

# Describe the plugin
plugin:
  type: site
  id: ru.dc.cms.plugin.mycomponent
  name: My Component Plugin Example
  tags:
    - test
  version:
    major: 4
    minor: 0
    patch: 0
  description: My simple component content type plugin
  website:
    name: Component Content Type Plugin Example
    url: https://dccms.com
  media:
    screenshots:
      - title: DCCMS
        description: DCCMS Example Component Plugin
        url: "https://raw.githubusercontent.com/dccms/site-plugin-example/master/.dc/screenshots/default.png"
  developer:
    company:
      name: DCCMS
      email: info@dccms.com
      url: https://dccms.com
  license:
    name: MIT
    url: https://opensource.org/licenses/MIT
  dcCmsVersions:
    - major: 4
      minor: 0
      patch: 0
  dcCmsEditions:
    - community
    - enterprise
Copy-icon

Затем создадим структуру директория для плагина для типа контента “Компонент” (authoring/content-types/component/*), где будут размещены файлы плагина:

authoring/
  content-types/
    component/
      mycomponent/
        config.xml
        controller.groovy
        form-definition.xml
Copy-icon

Ниже расположены файлы плагина.

Файл плагина authoring/content-types/component/mycomponent/config.xml:

<content-type name="/component/mycomponent" is-wcm-type="true">
<label>My Component</label>
<form>/component/plugins/ru/dccms/mycomponent/mycomponent</form>
<form-path>simple</form-path>
<model-instance-path>NOT-USED-BY-SIMPLE-FORM-ENGINE</model-instance-path>
<file-extension>xml</file-extension>
<content-as-folder>false</content-as-folder>
<previewable>false</previewable>
<quickCreate>false</quickCreate>
<quickCreatePath></quickCreatePath>
<noThumbnail>true</noThumbnail>
<image-thumbnail></image-thumbnail>
</content-type>
Copy-icon

Файл плагина authoring/content-types/component/mycomponent/form-definition.xml:

<form>
    <title>Test</title>
    <description></description>
    <objectType>component</objectType>
    <content-type>/component/plugins/ru/dccms/plugin/mycomponent/mycomponent</content-type>
    <imageThumbnail>undefined</imageThumbnail>
    <quickCreate>false</quickCreate>
    <quickCreatePath></quickCreatePath>
    <properties>        <property>
            <name>display-template</name>
            <label>Display Template</label>
            <value>/templates/plugins/ru/dccms/plugin/mycomponent/mycomponent.ftl</value>
            <type>template</type>
        </property>
        <property>
            <name>no-template-required</name>
            <label>No Template Required</label>
            <value></value>
            <type>boolean</type>
        </property>
        <property>
            <name>merge-strategy</name>
            <label>Merge Strategy</label>
            <value>inherit-levels</value>
            <type>string</type>
        </property>
    </properties>
    <sections>        <section>
            <title>Test Properties</title>
            <description></description>
            <defaultOpen>true</defaultOpen>
            <fields>
                <field>
                    <type>auto-filename</type>
                    <id>file-name</id>
                    <iceId></iceId>
                    <title>Component ID</title>
                    <description></description>
                    <defaultValue></defaultValue>
                    <help></help>
                    <properties>
                        <property>
                            <name>size</name>
                            <value>50</value>
                            <type>int</type>
                        </property>
                        <property>
                            <name>maxlength</name>
                            <value>50</value>
                            <type>int</type>
                        </property>
                        <property>
                            <name>readonly</name>
                            <value></value>
                            <type>boolean</type>
                        </property>
                    </properties>
                    <constraints>
                    </constraints>
                </field>
                <field>
                    <type>input</type>
                    <id>internal-name</id>
                    <iceId></iceId>
                    <title>Internal Name</title>
                    <description></description>
                    <defaultValue></defaultValue>
                    <help></help>
                    <properties>
                        <property>
                            <name>size</name>
                            <value>50</value>
                            <type>int</type>
                        </property>
                        <property>
                            <name>maxlength</name>
                            <value>50</value>
                            <type>int</type>
                        </property>
                    </properties>
                    <constraints>
                        <constraint>
                            <name>required</name>
                            <value><![CDATA[true]]></value>
                            <type>boolean</type>
                        </constraint>
                    </constraints>
                </field>
                <field>
                    <type>input</type>
                    <id>someValue_s</id>
                    <iceId></iceId>
                    <title>Some Value</title>
                    <description></description>
                    <defaultValue></defaultValue>
                    <help></help>
                    <properties>
                        <property>
                            <name>size</name>
                            <value>50</value>
                            <type>int</type>
                        </property>
                        <property>
                            <name>maxlength</name>
                            <value>50</value>
                            <type>int</type>
                        </property>
                        <property>
                            <name>readonly</name>
                            <value></value>
                            <type>boolean</type>
                        </property>
                        <property>
                            <name>tokenize</name>
                            <value>false</value>
                            <type>boolean</type>
                        </property>
                    </properties>
                    <constraints>
                        <constraint>
                            <name>required</name>
                            <value><![CDATA[]]></value>
                            <type>boolean</type>
                        </constraint>
                        <constraint>
                            <name>pattern</name>
                            <value><![CDATA[]]></value>
                            <type>string</type>
                        </constraint>
                    </constraints>
                </field>
            </fields>
        </section>
    </sections>
    <datasources>    </datasources>
</form>
Copy-icon

Файл плагина authoring/content-types/component/mycomponent/controller.groovy:

import scripts.libs.CommonLifecycleApi;

def contentLifecycleParams =[:];
contentLifecycleParams.site = site;
contentLifecycleParams.path = path;
contentLifecycleParams.user = user;
contentLifecycleParams.contentType = contentType;
contentLifecycleParams.contentLifecycleOperation = contentLifecycleOperation;
contentLifecycleParams.contentLoader = contentLoader;
contentLifecycleParams.applicationContext = applicationContext;

def controller = new CommonLifecycleApi(contentLifecycleParams);
controller.execute();
Copy-icon

Теперь плагин готов к тестированию. Мы установим наш плагин, расположенный по пути /users/myuser/component-plugin, используя cms-cli команду copy-plugin, чтобы протестировать плагин в проекте с именем “Editorial”:

./cms-cli copy-plugin -e local -s editorial --path /users/myuser/component-plugin
Copy-icon

После установки наш плагин для компонента будет доступен по пути Инструменты сайта > Типы контента.

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

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

Шаблоны

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