PHPackages                             roilafx/constructorevo - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. roilafx/constructorevo

ActiveLibrary[Utility & Helpers](/categories/utility)

roilafx/constructorevo
======================

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

120JavaScript

Since Feb 13Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/Kolya1222/constructor)[ Packagist](https://packagist.org/packages/roilafx/constructorevo)[ RSS](/packages/roilafx-constructorevo/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Evolution CMS Constructor
=========================

[](#evolution-cms-constructor)

Возможности
-----------

[](#возможности)

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

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

---

Требования
----------

[](#требования)

- TinyMCE 4

---

Установка
---------

[](#установка)

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

1. Установка пакета

```
php artisan package:installrequire roilafx/constructorevo "*"

```

2. Публикация стилей и скриптов

```
php artisan vendor:publish --provider="roilafx\constructor\constructorServiceProvider"

```

---

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

[](#быстрый-старт)

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

[](#1-создание-первой-страницы)

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

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

[](#2-работа-с-tv-параметрами)

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

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

[](#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 файла блока

[](#структура-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. Базовый блок с контентом

[](#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": "Нажмите кнопку редактирования для добавления контента",
            "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": "Нажмите кнопку редактирования для добавления контента",
            "attributes": [],
            "innerStyles": "",
            "innerClasses": "content-holder"
        },
        "visible": "1",
        "container": "workspace",
        "parentIndex": 0
    }
]
```

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

[](#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": "Название товара",
            "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": "9 990 ₽",
            "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": "Описание товара. Здесь можно рассказать о характеристиках, преимуществах и особенностях продукта.",
            "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. Загрузка в репозиторий

[](#3-загрузка-в-репозиторий)

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

---

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

[](#устранение-неполадок)

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

[](#не-загружаются-блоки-из-github)

**Проверьте:**

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

### Проблемы с TinyMCE

[](#проблемы-с-tinymce)

**Проверьте:**

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

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

[](#благодарности)

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

---

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance55

Moderate activity, may be stable

Popularity9

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity12

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/bed32336358dc3fe7d66414cfc6ce74c69fcaa31f3aee2d71b3975521743e317?d=identicon)[Kolya1222](/maintainers/Kolya1222)

---

Top Contributors

[![Kolya1222](https://avatars.githubusercontent.com/u/48295740?v=4)](https://github.com/Kolya1222 "Kolya1222 (22 commits)")

### Embed Badge

![Health badge](/badges/roilafx-constructorevo/health.svg)

```
[![Health](https://phpackages.com/badges/roilafx-constructorevo/health.svg)](https://phpackages.com/packages/roilafx-constructorevo)
```

###  Alternatives

[mihaildev/yii2-ckeditor

Yii2 CKEditor

118552.5k50](/packages/mihaildev-yii2-ckeditor)[yansongda/supports

common components

211.4M31](/packages/yansongda-supports)[ringierimu/state-workflow

Laravel State Workflow provide tools for defining and managing workflows and activities with ease.

3251.1k](/packages/ringierimu-state-workflow)[kohkimakimoto/earray

EArray is a small PHP class to provide convenient ways to access a PHP array.

176.1k](/packages/kohkimakimoto-earray)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)