はじめに

Page Composer は React ベースのレイアウトエディターです。任意の要素にマウントすると、ページ JSON がコンポーネント・フィールド・テンプレートによるドラッグアンドドロップの編集画面に変わります — そのすべてが素の React であり、完全に拡張できます。

アセットを追加する

エディターのスタイルシートとスクリプトを読み込みます。バンドルは自己完結型です — React は app.js に同梱されており、読み込み後に window.React として公開されます（ページ側が既に定義している場合を除く）。バンドルより前に読み込まれる拡張は window.React に依存できません。その場合はファクトリー形式で登録します（フィールドの作成 / コンポーネントテンプレートを参照）。

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

エディターをマウントする

要素に data-content の JSON 文字列を与え、pcEditor(selector, config) を呼び出します。エディターは要素の直後に挿入する隠し <input> に変更を保存するため、外側を <form> で囲めばそのまま送信できます。

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

タグによる初期化

マークアップで完結させたいですか。data-pce-on-* 属性でグローバル関数を指定すれば、pcEditor() の呼び出しに手を加えずにコールバックを接続できます — カンマ区切りで複数を登録できます。

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