Primeros pasos

Page Composer es un editor de maquetación basado en React. Lo montas en cualquier elemento y convierte el JSON de la página en una superficie de edición con arrastrar y soltar formada por componentes, campos y plantillas — todos ellos React puro y totalmente extensibles.

Añade los recursos

Carga la hoja de estilos y el script del editor. El bundle es autocontenido — React viaja dentro de app.js y se expone como window.React una vez cargado (salvo que la página ya defina uno). Las extensiones que se cargan antes del bundle no pueden depender de window.React; en su lugar se registran con la forma factory (consulta Crear campos / Plantillas de componentes).

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

Monta un editor

Dale a un elemento una cadena JSON en data-content y llama a pcEditor(selector, config). El editor guarda los cambios en un <input> oculto que inserta justo después del elemento, de modo que un <form> que lo envuelva lo sigue enviando.

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

Inicialización por atributos

¿Prefieres el marcado? Apunta los atributos data-pce-on-* a funciones globales para conectar callbacks sin tocar la llamada a pcEditor() — sepáralas con comas para adjuntar varias.

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