Premiers pas

Page Composer est un éditeur de mise en page basé sur React. Vous le montez dans n'importe quel élément et il transforme le JSON de la page en une surface d'édition en glisser-déposer faite de composants, de champs et de modèles — le tout en React pur et entièrement extensible.

Ajouter les ressources

Chargez la feuille de style et le script de l'éditeur. Le bundle est autonome — React est embarqué dans app.js et exposé sous window.React une fois chargé (sauf si la page en définit déjà un). Les extensions chargées avant le bundle ne peuvent pas compter sur window.React ; elles s'enregistrent alors sous la forme factory (voir Créer des champs / Modèles de composants).

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

Monter un éditeur

Donnez à un élément une chaîne JSON data-content et appelez pcEditor(selector, config). L'éditeur enregistre les modifications dans un <input> caché qu'il insère juste après l'élément, si bien qu'un <form> englobant le soumet normalement.

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

Initialisation par balisage

Vous préférez le balisage ? Faites pointer des attributs data-pce-on-* vers des fonctions globales pour brancher des callbacks sans toucher à l'appel pcEditor() — séparez-les par des virgules pour en attacher plusieurs.

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