시작하기

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>