解锁 React 开发新体验！Puck - 智能可视化编辑器

Puck：拥有AI强大的视觉编辑器

Puck是一款模块化、开源的视觉编辑器，专为React.js设计。它让开发者能够构建自定义的拖放体验，配合你自己的应用程序和React组件，轻松实现多样化的前端界面展示。

功能与特点

模块化设计

Puck作为一个React组件，能够在各种React.js环境中良好运行，包括Next.js。这种模块化的设计使得开发者可以根据需要进行灵活的扩展和定制，创建不同的组件和功能。

AI支持

Puck通过AI技术，为用户提供了友好的操作体验。用户可以通过拖放操作实时添加、排列和自定义组件，提升开发效率。

数据控制

使用Puck，你拥有自己的数据，不用担心受到供应商的锁定。所有的数据存储和处理完全在你的控制之下，使得开发者在构建应用时，更加放心。

MIT许可证

Puck采用的是MIT许可证，这意味着你可以将其用于内部系统和商业应用，而没有任何限制，确保了开发者的灵活性和自由度。

快速开始

安装Puck

在你的项目中，你可以通过以下命令轻松安装Puck：

sh 复制代码

npm i @puckeditor/core --save # 或使用 npx 创建Puck应用

渲染编辑器

通过以下代码块，你可以轻松渲染出Puck编辑器：

jsx 复制代码

// Editor.jsx
import { Puck } from "@puckeditor/core";
import "@puckeditor/core/puck.css";

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

// 描述初始数据
const initialData = {};

// 保存数据到你的数据库
const save = (data) => {};

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

渲染页面

接下来，使用下面的代码在页面中渲染Puck编辑器：

jsx 复制代码

// Page.jsx
import { Render } from "@puckeditor/core";
import "@puckeditor/core/puck.css";

export function Page() {
  return <Render />;
}

使用实例

Puck还为开发者提供了一些预设的"食谱"，以帮助快速启动一个已配置好的应用。你只需运行以下命令，便能创建一个新的基于Puck的应用：