跳至正文
Wener Notes

puck

约 1 分钟阅读
    • MIT, React
    • npm:@measured/puck
    • drag and drop editor for React
  • 参考
TypeScript
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// 组件配置
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};

// 初始数据
const initialData = {
  content: [],
  root: {},
};

// 保存数据
const save = (data) => {};

// 渲染编辑器
export function Editor() {
  return <Puck config={config} data={initialData} onPublish={save} />;
}

import { Render } from "@measured/puck";

// 渲染内容
export function Page() {
  return <Render config={config} data={data} />;
}

关联信息

反向链接、本文链接的其他页面和外部资料。

参考资料

GitHub3 条
其他外链1 条
最近更新commit 017a4a6编辑