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

собственные блоки можно размещать в /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 - конфиг блока, в нем указыается название блока, сортировка, подключение доп скриптов\стилей

Стили блока

Должны начинаться с .sp-block-MY_BLOCK_NAME чтобы избежать конфликтов с другими блоками\стилями

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

{
  "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(){//...});

Метод renderTemplate

var html = sprint_editor.renderTemplate('BLOCK_NAME-TEMPLATE_NAME', data)

Возвращает html-отображение шаблона с данными, название шаблона должно состоять из названия блока и названия шаблона внутри блока (задается в config.json секция templates)

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

Позволяет отобразить одни блоки внутри других

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>