Per iniziare

Page Composer è un editor di layout basato su React. Lo monti in qualsiasi elemento e trasforma il JSON della pagina in una superficie di editing drag-and-drop fatta di componenti, campi e template — tutti semplice React e completamente estensibili.

Aggiungere gli asset

Carica il foglio di stile e lo script dell'editor. Il bundle è autonomo — React è incluso in app.js e viene esposto come window.React dopo il caricamento (a meno che la pagina non ne definisca già uno). Le estensioni caricate prima del bundle non possono contare su window.React; si registrano invece con la forma factory (vedi Creare campi / Template dei componenti).

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

Montare un editor

Assegna a un elemento una stringa JSON data-content e chiama pcEditor(selector, config). L'editor salva le modifiche in un <input> nascosto che inserisce subito dopo l'elemento, così un <form> che lo racchiude continua a inviarlo.

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

Inizializzazione via tag

Preferisci il markup? Punta gli attributi data-pce-on-* a funzioni globali per collegare le callback senza toccare la chiamata a pcEditor() — separale con una virgola per collegarne più di una.

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