Wiki

Clone wiki

sprint.editor / CustomBlocks

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

собственные блоки можно размещать в /bitrix/admin/sprint.editor/my/ или /local/admin/sprint.editor/my/

блок также должен называться с префика my_* , например my_text

также в script.js внутри блока надо укзать его имя в методе регистрации блока sprint_editor.registerBlock('text', function ($, $el, data, settings) { //... }

Входящие параметры метода:

$ - jquery $el - jquery объект блока data - данные для блока, то содержимое что хранится в структуре как раз settings - доп параметры блока, те, которые через конфиг файл задаются

Файлы блока в админке script.js - основной скрипт блока, в нем регистрируется блок в редакторе template.html - шаблон блока style.css - стили блока config.json - конфиг блока, в нем указыается название блока, сортировка, подключение доп скриптов\стилей

пример конфига блока

{
  "title": "Картинка с текстом",
  "sort": "920"
}

пример конфига с подключением дополнительных скриптов, стилей, шаблонов { "title": "Компонент", "sort": "120", "js": [ "myscript1.js" ], "css": [ "mystyle1.css" ], "templates": [ "items.html" ] }

Внутри блока удобно пользоваться объектом $el, с ним удобно прописывать обработчки событий на элементы внутри блока или искать их например $el.find('.sp-text') - ищем внутри блока элемент с классом

или обрабатываем клик по кнопке внутри блока $el.on('click', '.sp-btn-add', function(){//...});

Составные блоки

script.js

sprint_editor.registerBlock('my_image_text', function ($, $el, data) {
    var areas = [
        {
            dataKey : 'image',
            blockName: 'image',
            container : '.sp-area1'
        },
        {
            dataKey : 'text',
            blockName: 'text',
            container : '.sp-area2'
        }
    ];

    this.getData = function () {
        return data;
    };

    this.collectData = function () {
        return data;
    };

    this.getAreas = function(){
        return areas;
    };
});

template.html

Картинка 
<div class="sp-area1"></div>

Текст
<div class="sp-area2"></div>

Updated