Начало работы

Page Composer — это редактор макетов на React. Вы монтируете его в любой элемент, и он превращает JSON страницы в поверхность редактирования с drag-and-drop: компоненты, поля и шаблоны — всё это обычные React-компоненты и всё полностью расширяемо.

Подключите ресурсы

Подключите стилевой файл и скрипт редактора. Сборка самодостаточна — React входит в состав app.js и после загрузки становится доступен как window.React (если страница ещё не определила свой). Расширения, которые загружаются до сборки, не могут полагаться на window.React; они регистрируются в фабричной форме (см. «Создание полей» / «Шаблоны компонентов»).

<link rel="stylesheet" href="/assets/css/app.css">
<script src="/assets/js/app.js"></script>

Смонтируйте редактор

Задайте элементу JSON-строку в атрибуте data-content и вызовите pcEditor(selector, config). Редактор сохраняет изменения в скрытый <input>, который вставляет сразу после элемента, поэтому обрамляющая <form> отправит его как обычно.

<div id="my-editor" data-content='[{"name":"Row","components":[]}]'></div>
<script>
  pcEditor('#my-editor', {
    mode: 'widget',
    fields: ['text', 'wysiwyg'],
    requests: { driver: 'graphql', config: { url: 'https://host/graphql' } }
  });
</script>

Инициализация через атрибуты

Предпочитаете разметку? Укажите в атрибутах data-pce-on-* имена глобальных функций, чтобы подключить колбэки, не трогая вызов pcEditor() — несколько обработчиков перечисляются через запятую.

<div id="editor" data-pce-on-render="onRender, trackLoad"></div>