Skip to content
PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
  1. Компоненты
  2. PageBuilder
  3. Типы полей
  4. Free
  5. editorjs

Поле editorjs

Версия: Free.

Зачем этот тип

Блочный контент с заголовками, списками, embed. html готов для chunk, json для кастомного рендера. Структура предсказуемее произвольного HTML.

Когда использовать

  • Длинная статья или landing с блоками
  • Контент, который потом парсят по json
  • Альтернатива richtext, когда редактор работает блоками

Советы

В chunk обычно {$body.html}, не сырой json. Простой HTML без блоков быстрее в richtext.

Похожие типы

  • richtext для классического WYSIWYG HTML
  • ace если html правит разработчик

Настройка

json
{
  "name": "body",
  "type": "editorjs",
  "label": "Контент",
  "tab": "Контент",
  "width": 100,
  "active": true
}

Значение

Объект { json, html }; на фронте обычно html.

Данные секции

Ключ body в данных секции:

json
{
  "body": {
    "json": {
      "time": 1710000000000,
      "blocks": [
        {
          "type": "paragraph",
          "data": {
            "text": "Текст блока"
          }
        }
      ],
      "version": "2.29.0"
    },
    "html": "<p>Текст блока</p>"
  }
}
  • В chunk обычно используют html; json: сырой Editor.js.

Пример в chunk

html
<div class="pb-richtext__content">{$body.html}</div>

Общие свойства

Для полей с name, которые сохраняются в данных секции:

КлючТипРольПанель
tabstringПодзаголовок группы в инспектореда
width25–100Ширина поля в % строки (flex)да
descriptionstringПодсказка под подписьюда
defaultanyНачальное значение новой секциида
activeboolfalse: скрыть поле в инспектореда
requiredboolОбязательно при publish (черновик сохраняется)да
  • Дополнительно: в data { json, html }; в chunk обычно {$field.html}.

Подробнее: обзор полей.

Дальше