Kom igång

Page Composer är en React-baserad layouteditor. Du monterar den i vilket element som helst och den förvandlar sid-JSON till en dra-och-släpp-yta för redigering av komponenter, fält och mallar — som alla är ren React och fullt utbyggbara.

Lägg till resurserna

Ladda editorns stilmall och skript. Bundlen är fristående — React ingår i app.js och exponeras som window.React när den har laddats (om inte sidan redan definierar en). Tillägg som laddas före bundlen kan inte förlita sig på window.React; de registrerar sig i stället med factory-formen (se Skapa fält / Komponentmallar).

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

Montera en editor

Ge ett element en data-content-JSON-sträng och anropa pcEditor(selector, config). Editorn sparar ändringar i en dold <input> som den infogar direkt efter elementet, så ett omslutande <form> skickar den fortfarande.

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

Initiering via taggar

Föredrar du markup? Peka data-pce-on-*-attribut mot globala funktioner för att koppla callbacks utan att röra pcEditor()-anropet — separera med komma för att koppla flera.

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