CustomBlocks

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

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

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

также в script.js внутри блока надо указать его имя в методе регистрации блока

sprint_editor.registerBlock('my_text', function ($, $el, data, settings, currentEditorParams)  { //... }

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

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

Файлы блока в админке

• 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.on('click', '.sp-btn-add', function(){//...});

или искать вложенные в блок элементы

$el.find('.sp-text') 

Метод renderTemplate

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

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

Цепочки вызовов

При отображении\добавлении блока в админке

1. вызывается функция, описанная в sprint_editor.registerBlock('block_name', function(){$, $el, data, ...})

это инициализация блока, в этот момент стоит соединить data (сохранённый контент блока) со значением по умолчанию

    data = $.extend({
        title: '',
    }, data);

2. данные блока после инициализации запрашиваются через this.getData() в этом методе вы также модифицировать данные нужные перед отрисовкой вашего шаблона

3. выполняется отрисовка шаблона блока template.html методом sprint_editor.renderTemplate('block_name', data); html-содержимое шаблона вставится в объект $el

4. вызывается this.afterRender() - метод после отрисовки шаблона, удобный момент добавить обработчики действий для блока

5. вызывается this.getAreas() если он объявлен, метод для инициализации составных блоков

При сохранении блока в админке

1. вызывается this.collectData() - метод в котором собираются данные при сохранении блока. вы должны обогатить объект data (контент блока) новыми значениями из полей ввода вашего блока и вернуть его

пример

    this.collectData = function () {
        data.title = $el.find('.sp-title').val();

        return data;
    };

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