roilafx/constructorevo

There is no license information available for the latest version (dev-main) of this package.

Модуль для создания наполнения страницы при помощи Drag and Drop

Maintainers

Package info

github.com/Kolya1222/constructor

Language:JavaScript

pkg:composer/roilafx/constructorevo

Statistics

Installs: 20

Dependents: 0

Suggesters: 0

Stars: 1

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

dev-main 2026-02-13 09:32 UTC

Unknown License 23e62dbebbc329fd5b2d1e37da062ac8fdad3ac2

This package is auto-updated.

Last update: 2026-03-13 09:38:08 UTC

README

Возможности

Основные функции:

  • Drag & Drop интерфейс с поддержкой вложенности
  • Визуальное редактирование контента через TinyMCE
  • Интеграция с TV параметрами Evolution CMS
  • Библиотека готовых блоков из GitHub репозитория
  • Панель свойств для тонкой настройки элементов
  • Контекстное меню с операциями копирования/вставки
  • Сохранение и загрузка структуры страницы
  • Экспорт чистого HTML кода

Требования

  • TinyMCE 4

Установка

Выполните команды из директории /core:

  1. Установка пакета
php artisan package:installrequire roilafx/constructorevo "*"
  1. Публикация стилей и скриптов
php artisan vendor:publish --provider="roilafx\constructor\constructorServiceProvider"

Быстрый старт

1. Создание первой страницы

  1. Откройте любой документ в админке Evolution CMS
  2. Перейдите на вкладку "Конструктор"
  3. Перетащите элемент "Строка" в рабочую область
  4. Внутрь строки добавьте "Колонку"
  5. В колонку добавьте "Контент"
  6. Дважды кликните по тексту для редактирования

2. Работа с TV параметрами

  1. Создайте TV параметр в админке Evolution
  2. Привяжите его к шаблону страницы
  3. В конструкторе перетащите TV параметр из боковой панели
  4. Настройте отображение через панель свойств

3. Использование библиотеки блоков

  1. Нажмите на иконку "Библиотека" в боковой панели
  2. Выберите категорию (Страницы, Секции, Блоки)
  3. Нажмите "+" на выбранном блоке
  4. Готовый блок появится в рабочей области

Использование в шаблоне

[!documentBuilder!]

{!! evo()->runSnippet('documentBuilder') !!}

Библиотека блоков

Подключение репозитория

// В ElementService.php
public function getRepositories(): array
{
    return [
        [
            'id' => 'my-blocks',
            'name' => 'Мои блоки',
            'url' => 'https://api.github.com/repos/username/constructor-blocks/contents/',
            'type' => 'github',
            'branch' => 'main'
        ]
    ];
}

Структура JSON файла блока

{
    "title": "Название блока",
    "description": "Описание блока",
    "type": "section",
    "tags": ["bootstrap", "responsive", "tv:price"],
    "preview": "https://.../preview.png",
    "elements": [
        {
            "type": "row",
            "index": "0",
            "parentIndex": null,
            "values": {}
        }
    ]
}

Параметры блока

Поле Тип Обязательное Описание
title string Да Название блока
description string Нет Описание
type string Да page, section, block
tags array Нет Теги для поиска
preview string Нет URL превью
elements array Да Массив элементов

Создание своих блоков

1. Базовый блок с контентом

[
    {
        "id": "",
        "type": "column",
        "index": "0",
        "config": "column",
        "values": {
            "styles": "",
            "classes": "constructor-element",
            "attributes": [],
            "dropZoneStyles": "display: flex; flex-direction: column; gap: 16px; padding: 12px;",
            "dropZoneClasses": "drop-zone"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": null
    },
    {
        "id": "",
        "type": "content",
        "index": "1",
        "config": "content",
        "values": {
            "styles": "",
            "classes": "constructor-element",
            "content": "<p>Нажмите кнопку редактирования для добавления контента</p>",
            "attributes": [],
            "innerStyles": "",
            "innerClasses": "content-holder"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 0
    },
    {
        "id": "",
        "type": "content",
        "index": "2",
        "config": "content",
        "values": {
            "styles": "",
            "classes": "constructor-element selected",
            "content": "<p>Нажмите кнопку редактирования для добавления контента</p>",
            "attributes": [],
            "innerStyles": "",
            "innerClasses": "content-holder"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 0
    }
]

2. Блок с TV параметрами

[
    {
        "id": "",
        "type": "row",
        "index": "0",
        "config": "row",
        "values": {
            "styles": "padding: 40px 20px;",
            "classes": "constructor-element product-section",
            "attributes": {
                "data-index": "0"
            },
            "dropZoneStyles": "display: flex; flex-direction: row; gap: 40px; max-width: 1200px; margin: 0px auto;",
            "dropZoneClasses": "drop-zone container"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": null
    },
    {
        "id": "",
        "type": "column",
        "index": "1",
        "config": "column",
        "values": {
            "styles": "flex: 1 1 0%;",
            "classes": "constructor-element",
            "attributes": {
                "data-index": "1"
            },
            "dropZoneStyles": "display: flex; flex-direction: column; gap: 20px;",
            "dropZoneClasses": "drop-zone"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 0
    },
    {
        "id": "",
        "type": "column",
        "index": "2",
        "config": "column",
        "values": {
            "styles": "flex: 1 1 0%;",
            "classes": "constructor-element",
            "attributes": {
                "data-index": "2"
            },
            "dropZoneStyles": "display: flex; flex-direction: column; gap: 20px;",
            "dropZoneClasses": "drop-zone"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 0
    },
    {
        "id": "",
        "type": "tv",
        "index": "3",
        "config": "tv",
        "values": {
            "alt": "test",
            "tvId": "1",
            "styles": "",
            "tvName": "test",
            "tvType": "image",
            "classes": "constructor-element selected",
            "content": "{{$documentObject['test']}}",
            "attributes": {
                "data-index": "3",
                "data-tv-id": "1",
                "data-tv-name": "test",
                "data-tv-type": "image"
            },
            "targetStyles": "max-width: 100%;",
            "targetClasses": ""
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 1
    },
    {
        "id": "",
        "type": "content",
        "index": "4",
        "config": "content",
        "values": {
            "styles": "",
            "classes": "constructor-element",
            "content": "<h1 style=\"font-size: 32px; color: #333;\">Название товара</h1>",
            "attributes": {
                "data-index": "4"
            },
            "innerStyles": "",
            "innerClasses": "content-holder content-holder content-holder content-holder content-holder"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 2
    },
    {
        "id": "",
        "type": "content",
        "index": "5",
        "config": "content",
        "values": {
            "styles": "",
            "classes": "constructor-element",
            "content": "<p style=\"font-size: 24px; color: #667eea; font-weight: bold;\">9 990 ₽</p>",
            "attributes": {
                "data-index": "5"
            },
            "innerStyles": "",
            "innerClasses": "content-holder content-holder content-holder content-holder content-holder product-price"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 2
    },
    {
        "id": "",
        "type": "content",
        "index": "6",
        "config": "content",
        "values": {
            "styles": "",
            "classes": "constructor-element",
            "content": "<p style=\"color: #666; line-height: 1.6;\">Описание товара. Здесь можно рассказать о характеристиках, преимуществах и особенностях продукта.</p>",
            "attributes": {
                "data-index": "6"
            },
            "innerStyles": "",
            "innerClasses": "content-holder content-holder content-holder content-holder content-holder product-description"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 2
    },
    {
        "id": "",
        "type": "button",
        "index": "7",
        "config": "button",
        "values": {
            "styles": "",
            "classes": "constructor-element",
            "content": "Добавить в корзину",
            "disabled": false,
            "attributes": {
                "data-index": "7"
            },
            "buttonType": "submit",
            "innerStyles": "background: rgb(102, 126, 234); color: white; border: none; padding: 12px 30px; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background 0.3s;",
            "innerClasses": "btn btn-primary btn-lg"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 2
    }
]

3. Загрузка в репозиторий

  1. Создайте JSON файл в папке blocks/
  2. Закоммитьте в GitHub
  3. Блок появится в библиотеке конструктора

Устранение неполадок

Не загружаются блоки из GitHub

Проверьте:

  1. Правильно ли указан URL репозитория
  2. Доступен ли GitHub API (нет блокировки CORS)
  3. Есть ли JSON файлы в указанной папке

Проблемы с TinyMCE

Проверьте:

  1. Подключен ли редактор в Evolution CMS
  2. Есть ли конфликт версий TinyMCE
  3. Правильно ли указан селектор

Благодарности

  • Evolution CMS Team за отличную платформу
  • Сообществу Evolution за идеи и тестирование
  • Всем пользователям конструктора