puck
约 1 分钟阅读
- measuredco/puckGitHubmeasuredco/puckmeasuredco/puck · MIT, React · npm:@measured/puck · drag and drop editor for React · 参考 · https://demo.puckeditor.com/edit笔记:puck
- MIT, React
- npm:@measured/puck
- drag and drop editor for React
- 参考
- demo.puckeditor.com/edit链接demo.puckeditor.com/editmeasuredco/puck · MIT, React · npm:@measured/puck · drag and drop editor for React · 参考 · https://demo.puckeditor.com/edit笔记:puck
- measuredco/awesome-puckGitHubmeasuredco/awesome-puckmeasuredco/puck · MIT, React · npm:@measured/puck · drag and drop editor for React · 参考 · https://demo.puckeditor.com/edit笔记:puck
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 条
- measuredco/awesome-puckgithub.com/measuredco/awesome-puck
- measuredco/puckgithub.com/measuredco/puck
- measuredco/puck/packages/core/types/Config.tsxgithub.com/measuredco/puck/blob/main/packages/core/types/Config.tsx
其他外链1 条
- demo.puckeditor.com/editdemo.puckeditor.com/edit