Aan de slag

Page Composer is een layout-editor op basis van React. Je mount hem in een willekeurig element en hij maakt van page-JSON een drag-and-drop-bewerkoppervlak met componenten, velden en templates — allemaal gewoon React en volledig uitbreidbaar.

De assets toevoegen

Laad de stylesheet en het script van de editor. De bundle is self-contained — React zit in app.js en wordt na het laden beschikbaar gesteld als window.React (tenzij de pagina er al een definieert). Uitbreidingen die vóór de bundle laden, kunnen niet op window.React rekenen; die registreren zich met de factory-vorm (zie Velden maken / Componenttemplates).

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

Een editor mounten

Geef een element een data-content-JSON-string en roep pcEditor(selector, config) aan. De editor bewaart wijzigingen in een verborgen <input> die hij direct na het element invoegt, zodat een omliggend <form> de waarde gewoon meestuurt.

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

Initialiseren via markup

Liever markup? Laat data-pce-on-*-attributen naar globale functies wijzen om callbacks te koppelen zonder de pcEditor()-aanroep aan te passen — scheid ze met komma's om er meerdere te koppelen.

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