Блочный редактор

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

Структура файлов

В Блочном редакторе используется следующая структура данных:

/bitrix/components/sf.block.edit - расположение компонента (TEMPLATE_PATH - путь до компонента);
TEMPLATE_PATH/templates/.default/ - расположение шаблона;
TEMPLATE_PATH/template.php - файл шаблона;
TEMPLATE_PATH/panel.php - основная панель управления;
TEMPLATE_PATH/save.php - форма сохранения;
TEMPLATE_PATH/add.row.php - кнопка добавления строки;
/simai/admin/block - расположение дополнительных подключаемых файлов (SF_DIR_BE - путь до доп.файлов);
SF_DIR_BE/position.php - файл временного сохранения параметров в сессию;
SF_DIR_BE/addblock.php - панель всех блоков используется для вставки нового блока;
SF_DIR_BE/block.config.php - редактирование параметров блока;
SF_DIR_BE/col.config.php - редактирование параметров колонки;
SF_DIR_BE/row.config.php - редактирование параметров строки;
SF_DIR_BE/defaultParam - Шаблоны конфигов для пустых строк и колонок (SF_DIR_BE_CONFIG - путь до стандартных конфигов);
SF_DIR_BE_CONFIG/row.php - Шаблон пустой строки;
SF_DIR_BE_CONFIG/column.php - Шаблон пустой колонки;
SF_DIR_BE/template - расположение файлов верстки повторяющихся элементов (SF_DIR_BE_HTML_TEMPLATE - путь до шаблонов);
SF_DIR_BE_HTML_TEMPLATE/column.resize.list.php - верстка изменение ширины колонки из списка;
SF_DIR_BE_HTML_TEMPLATE/column.resize.php - верстка изменение ширины колонки ползунок;
SF_DIR_BE_HTML_TEMPLATE/component.panel.php - верстка мини панели управления (тулбар) блоком;
SF_DIR_BE_HTML_TEMPLATE/column.panel.php - верстка мини панели управления (тулбар) колонкой;
SF_DIR_BE_HTML_TEMPLATE/.row.panel.php - верстка мини панели управления (тулбар) строкой;
SF_DIR_BE_HTML_TEMPLATE/add.block.php - кнопка добавления блока;
SF_DIR_BE_HTML_TEMPLATE/row.title.php - верстка наименования строки и управления строкой;
SF_DIR_BE_HTML_TEMPLATE/row.php - верстка строки используется для вставки новой строки;
SF_DIR_BE_HTML_TEMPLATE/column.php - верстка колонки используется для вставки новой колонки;
SF_DIR_BE_HTML_TEMPLATE/block.php - верстка блока используется для вставки нового блока;
SF_DIR_BE_HTML_TEMPLATE/template.edit.view.on.php - верстка кнопок Desctop, Tablet, Mobile в режиме просмотра;
/simai/asset/block-editor - ресурсы (SOURCE_BE - путь до ресурсов);
SOURCE_BE/css/editor.css - стили
SOURCE_BE/js/editor.js - скрипт управления функционалом;
SOURCE_BE/js/editorMobile.js - скрипт управления режимами экрана (Desctop,Table,Mobile);
SOURCE_BE/js/dragula.js - скприпт управления сортировкой строк, колонок и блоков.

События JS

uploadStatusChangeEditor - обновление счетчика изменений на странице;
updateBlockEditor - обновление HTML
updateBlockEditorAjax - перезагрузка и обновление HTML;
updateInHistoryBlockEditorAjax - перезагрузка и обновление HTML с сохранением истории;
savePageBlockEditorAjax - сохранение изменений на странице и обновление HTML с очисткой истории;
savePageBlockEditor - сохранение изменений в сессии;
addNewBlockBlockEditor - добавление нового блока;
saveHistoryBlockEditor - сохранение в историю изменений сделанных через настройки стороки, колонки и блока.

Режимы и функции

Главная панель

Главная панель разделяется на две части, на левую и правую. В левой части находится индикатор изменений на странице и кнопка сохранения. В правой части находятся следующие кнопки управления:

- Показать общие настройки области
- Включить режим просмотра области:
- Desctop - десктопный режим - широкие экраны
- Tablet - планшетный режим
- Mobile - мобильный режим
- Включить режим редактирования:
- - с колонками;
- - без колонок.
Режимы управления историей:
- - Вернуться назад
- - Промотать вперед;
- Закрыть редактор.

Панель управления строки

Находится над строкой. В левой части находится заголовок строки и кнопка редактирования заголовка.

В правой части находится следующие функции управления строкой:

- удалить строку
- переместить строку наверх
- переместить строку вниз

Панель управления шириной колонки

Панель отображается в виде 12 индикатора с числом отрожающим ширину колонки и выпадающим списком имеющим восможную ширину колонки

Также для управления шириной колонки присутствует позунок между колонок или в конце каждой колонки.

Панель управления строками, колонками и блоками

Панели строк, колонок и блоков идентичны по фукнкционалу и составом кнопок

- сортировка;
- добавление новой строки, колонки или блока;
- копировать строку, колонку или блок;
- показать настройки
- сохранить в пользовательскую библиотеку;
- диактивировать - активировать;
- удалить;

Параметры основного класса `BlockEditor` управления фукнционалом

viewMode - режим просмотра
animation - HTML анимация загрузки
page - пути страниц для сохранения и редактирования:
- save - путь к странице для временного сохранения в сессию;
- saveAjax - путь к страниц для полного сохранения.
template - пути к страницам шаблонов для вставки новых строк, столбцов и блоков:
- row - шаблон строки
- column - шаблон колонки
- block - шаблон блока
- addblock - шаблон кнопки добавления блока
defaultParam - шаблоны конфигов строк и колонок:
- row - конфиг строки
- column - конфиг колонки
message - системные сообщения:
Используются для записи в историю и при системных уведомлениях
- sort - сообщение сортировки.
- panel - сообщения для панели:
  - editMode - для режима редактирования с колонками и без.
- row - сообщения для строк
  - active - при активировании
  - deactive - при диактивировании
  - title - при редактировании заголовка
  - editParam - при редактировании параметров
  - add - при добавлении новой;
  - copy - при копировании;
  - remove - при удалении;
  - sort - при сортировке.
- column - сообщения для колонок:
  - active - при активировании;
  - deactive - при диактивировании;
  - resize - при изменении ширины колонки;
  - editParam - при редактировании параметров;
  - add - при добавлении новой;
  - copy - при копировании;
  - remove - при удалении;
  - sort - при сортировке.
- block - сообщения для блоков:
  - active - при активировании;
  - deactive - при диактивировании;
  - title - при редактировании заголовка;
  - editParam - при редактировании параметров;
  - add - при добавлении нового;
  - copy - при копировании;
  - remove - при удалении;
  - sort - при сортировке;
icon - иконки:
- toolbar - мини-панель управления (toolbar)

Пример параметров:

{
    viewMode : 'N',
    animation : '<div class="sf-block-editor--animation-status animation-none m-0 bw-0 bRadius--0 '
        + 'image-load--animation z-1 align-items-center '
        + 'justify-content-center bg-surface-0 absolute top-0 right-0'
        + 'ab-0 left-0 w-full h-full flex">'
        + '<svg style="max-width:150px;max-height:150px!important"'
        + 'class="loader--animation w-full h-full" viewBox="25 25 50 50">'
        + '<circle class="side-panel-default-loader-path" cx="50" cy="50"'
        + 'r="20" fill="none" stroke-miterlimit="10"></circle>'
        + '</svg></div>',
    animationRelative :
        '<div class="sf-block-editor--animation-status animation-none '
        + ' bRadius--0 image-load--animation z-1 align-items-center '
        + ' justify-content-center bg-surface-0 w-full p-1 flex m-0 bw-0">'
        + '<svg style="max-width:150px;max-height:150px!important"'
        + 'class="loader--animation w-full h-full" viewBox="25 25 50 50">'
        + '<circle class="side-panel-default-loader-path" cx="50" cy="50"'
        + 'r="20" fill="none" stroke-miterlimit="10"></circle>'
        + '</svg></div>',
    page :
    {
        save : '/simai/admin/block/position.php',
        ajax : '',
        saveAjax : '',
    },
    template :
    {
        row : '/simai/admin/block/template/row.php',
        column : '/simai/admin/block/template/column.php',
        block : '/simai/admin/block/template/block.php',
        addblock : '/simai/admin/block/template/add.block.php',
    },
    defaultParam :
    {
        row : '/simai/admin/block/defaultParam/row.php',
        column : '/simai/admin/block/defaultParam/column.php',
    },
    message :
    {
        sort : 'Сортировка',
        panel :
        {
            editMode : 'Режим редактирования с колонками | Без колонок',
        },
        row :
        {
            active : 'Активация строки',
            deactive : 'Диактивация строки',
            title : 'Редактирование заголовка строки',
            editParam : 'Редактирование параметров строки',
            add : 'Добавление новой строки',
            copy : 'Копирование строки',
            remove : 'Удаление строки',
            sort : 'Сортировка строки',
        },
        column :
        {
            active : 'Активация колонки',
            deactive : 'Диактивация колонки',
            resize : 'Изменение ширины колонки',
            editParam : 'Редактирование параметров колонки',
            add : 'Добавление новой колонки',
            copy : 'Копирование колонки',
            remove : 'Удаление колонки',
            sort : 'Сортировка колонки'
        },
        block :
        {
            active : 'Активация блока',
            deactive : 'Диактивация блока',
            title : 'Редактирование заголовка блока',
            editParam : 'Редактирование параметров блока',
            add : 'Добавление нового блока',
            copy : 'Копирование блока',
            remove : 'Удаление блока',
            sort : 'Сортировка блока'
        },
    },
    icon :
    {
        toolbar :
        {
            activeElement :
            {
                active : '<i class="fas fa-eye transition"></i>',
                diactive : '<i class="fas fa-eye-slash transition"></i>',
            },
        },
    }
}

Изменить статью