Erste Schritte

Page Composer ist ein React-basierter Layout-Editor. Du bindest ihn in ein beliebiges Element ein, und er verwandelt Seiten-JSON in eine Drag-and-drop-Oberfläche aus Komponenten, Feldern und Templates — allesamt reines React und vollständig erweiterbar.

Assets einbinden

Binde das Stylesheet und das Skript des Editors ein. Das Bundle ist eigenständig — React steckt in app.js und wird nach dem Laden als window.React bereitgestellt (sofern die Seite nicht bereits eine eigene Instanz definiert). Erweiterungen, die vor dem Bundle geladen werden, können sich nicht auf window.React verlassen; sie registrieren sich stattdessen über die Factory-Form (siehe Felder erstellen / Komponenten-Templates).

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

Einen Editor mounten

Gib einem Element einen data-content-JSON-String und rufe pcEditor(selector, config) auf. Der Editor schreibt Änderungen in ein verstecktes <input>, das er direkt hinter dem Element einfügt — ein umschließendes <form> sendet es damit ganz normal mit.

<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>

Initialisierung im Markup

Lieber Markup? Lass data-pce-on-*-Attribute auf globale Funktionen zeigen, um Callbacks zu verdrahten, ohne den pcEditor()-Aufruf anzufassen — mehrere trennst du per Komma.

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