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

Поле editorjs ​

Версия: Pro (advanced-fields). Новое поле создаётся только в Pro. Уже сохранённое открывается и пишется.

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

Текст из блоков: заголовки, списки, вставки. В чанк можно отдать готовый HTML (html) или JSON (json), если разметку собираете сами. Набор блоков предсказуемее, чем произвольный HTML.

Визуальный редактор включается пакетом mxEditorJs: mxeditorjs.enabled, редактор mxEditorJs, assets на месте. Без него в инспекторе запасной вариант: JSON и HTML без редактора.

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

  • Длинная статья или лендинг с блоками
  • Контент, который дальше разбирают по 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 }.

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

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

json
{
  "body": {
    "json": {
      "time": 1710000000000,
      "blocks": [
        {
          "type": "paragraph",
          "data": {
            "text": "Текст блока"
          }
        }
      ],
      "version": "2.29.0"
    },
    "html": "<p>Текст блока</p>"
  }
}

Пример в chunk ​

modx
<div class="pb-richtext__content">[[+body.html]]</div>
fenom
<div class="pb-richtext__content">{$body.html}</div>

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

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

КлючТипРольПанель
tabstringПодзаголовок группы в инспектореда
width25, 33, 50, 66, 75, 100Ширина поля в % строки (flex); в CMP только эти значенияда
descriptionstringПодсказка под подписьюда
defaultanyНачальное значение новой секциида
activeboolfalse: скрыть поле в инспектореда
requiredboolОбязательно при publish (черновик сохраняется)да

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

Дальше ​