快速开始

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>