Başlarken

Page Composer, React tabanlı bir yerleşim editörüdür. Onu herhangi bir elemente bağlarsınız ve sayfa JSON'unu bileşenlerden, alanlardan ve şablonlardan oluşan sürükle-bırak bir düzenleme yüzeyine dönüştürür — bunların hepsi düz React'tir ve tamamen genişletilebilir.

Dosyaları ekleyin

Editörün stil dosyasını ve script'ini yükleyin. Bundle kendi kendine yeterlidir — React app.js içinde gelir ve yüklendikten sonra window.React olarak dışa açılır (sayfa halihazırda bir React tanımlamıyorsa). Bundle'dan önce yüklenen eklentiler window.React'e güvenemez; onun yerine factory biçimiyle kayıt olurlar (bkz. Alan oluşturma / Bileşen şablonları).

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

Bir editör bağlayın

Bir elemente data-content JSON dizesi verin ve pcEditor(selector, config) çağırın. Editör, değişiklikleri elementin hemen ardına eklediği gizli bir <input> içinde saklar; böylece elementi saran bir <form> içeriği sorunsuz gönderir.

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

Etiket üzerinden başlatma

Markup'ı mı tercih edersiniz? data-pce-on-* özniteliklerini global fonksiyonlara yönlendirerek pcEditor() çağrısına hiç dokunmadan callback bağlayın — birden fazlasını bağlamak için virgülle ayırın.

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