Как сделать админку на Битрикс в виде конструктора с помощью Sprint Editor

Как сделать админку на Битрикс в виде конструктора с помощью Sprint Editor

Админка на Битрикс часто ограничена стандартным функционалом, но с помощью модуля Sprint Editor можно превратить её в визуальный конструктор. Это удобно для редактирования контента напрямую на страницах и ускоряет процесс управления сайтом.

1. Установка и подключение Sprint Editor

Первым шагом нужно установить модуль. Обычно это делается через Marketplace или через менеджер модулей Битрикс:

php /bitrix/modules/main/install/index.php?module=sprint.editor

После установки убедитесь, что модуль активирован. В административной панели он появится в разделе Настройки → Настройки продукта → Модули.

2. Настройка прав доступа

Чтобы пользователи могли редактировать страницы через конструктор, необходимо назначить им права на редактирование. В Sprint Editor это делается через пользовательские группы:

1. Настройки модуля → Права доступа
2. Выбираем группу пользователей
3. Ставим флажок "Редактирование страниц"

3. Подключение Sprint Editor на странице

Чтобы включить режим конструктора для конкретной страницы или компонента, используйте следующий PHP-код:

<?php
if(\Bitrix\Main\Loader::includeModule('sprint.editor')) {
    \Sprint\Editor\Editor::init();
}
?>

Теперь при открытии страницы администратор увидит панели конструктора.

4. Создание редактируемых областей

Редактируемые области называются контент-блоками. Пример добавления блока:

<?php
use Sprint\Editor\Blocks;

Blocks::addText('TEXT_BLOCK_1', 'Введите текст сюда', 'Привет, мир!');
?>

<div class="my-block">
    <?= Blocks::getText('TEXT_BLOCK_1') ?>
</div>

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

5. Добавление визуальных элементов

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

<?php
Blocks::addImage('IMAGE_BLOCK_1', 'Выберите изображение');
?>

<div class="image-container">
    <img src="<?= Blocks::getImage('IMAGE_BLOCK_1') ?>" alt="Картинка">
</div>

6. Сохранение данных и работа с компонентами

Sprint Editor автоматически сохраняет все изменения в iblock или в пользовательские поля. Если нужно работать с компонентами Битрикс, подключение будет таким:

<?php
$APPLICATION->IncludeComponent(
    "bitrix:news.list",
    "",
    array(
        "IBLOCK_ID" => 5,
        "NEWS_COUNT" => 10,
        "SORT_BY1" => "ACTIVE_FROM",
        "SORT_ORDER1" => "DESC",
        "CACHE_TYPE" => "A",
        "CACHE_TIME" => 3600,
    ),
    false
);
?>

Теперь администратор сможет редактировать текстовые и графические элементы внутри этого компонента прямо на фронтенде.

7. Полезные советы

• Используйте уникальные идентификаторы для каждого блока, чтобы избежать конфликтов.
• Не забудьте подключить CSS и JS для визуального отображения редактора.
• Для сложных макетов можно комбинировать Sprint Editor с собственными компонентами.

8. Заключение

С помощью модуля Sprint Editor вы можете превратить админку Битрикс в настоящий визуальный конструктор. Это ускоряет работу с контентом, делает её удобной для пользователей без технических навыков и упрощает создание кастомных страниц.

Ссылки на официальную документацию: Sprint Editor