craft.js

<div align="center" style={{d}}> <h1>craft.js</h1> <a href="https://www.npmjs.com/package/@craftjs/core"> <img src="https://img.shields.io/npm/v/@craftjs/core?color=%232680eb&label=NPM&logo=npm&logoColor=%232680eb&style=for-the-badge"> </a> <img src="https://img.shields.io/npm/l/@craftjs/core?color=%23000&style=for-the-badge"> </div> <div align="center" style={{d}}> <img src="https://yellow-cdn.veclightyear.com/835a84d5/7d42ba86-4327-472d-adbf-f5284e5c73e5.gif"/> </div> <p align="center"> <strong> <a href="https://craft.js.org/">在线演示</a> </strong> </p>

页面编辑器是提供出色用户体验的绝佳方式。然而，构建一个页面编辑器往往是一项相当艰巨的任务。

现有的一些库提供了开箱即用的完整页面编辑器，包括用户界面和可编辑组件。但是，如果你想进行自定义，比如修改用户界面及其行为，很可能需要修改库本身。

Craft.js通过模块化页面编辑器的构建块来解决这个问题。它提供了一个拖放系统，并处理用户组件的渲染、更新和移动等操作。有了这些，你就能够按照自己的想法构建页面编辑器，完全掌控其外观和行为。

文档

示例

这些示例能让你了解Craft.js的灵活性。

这两个示例看起来非常不同，用户界面也大相径庭。但它们都是用Craft.js构建的！🤯

特性 :fire:

就是React

无需复杂的插件系统。你可以像设计任何其他React前端应用一样，从头到尾设计你的编辑器。

一个简单的用户组件可以轻松定义如下：

import { useNode } from "@craftjs/core";

const TextComponent = ({ text }) => {
  const {
    connectors: { connect, drag },
  } = useNode();

  return (
    <div ref={(ref) => connect(drag(ref))}>
      <h2>{text}</h2>
    </div>
  );
};

事实上，你的页面编辑器的整个用户界面都是用React构建的。

import React from "react";
import { Editor, Frame, Element  } from "@craftjs/core";
const App = () => {
  return (
    <div>
      <header>一些花哨的头部或其他内容</header>
      <Editor>
        // 可编辑区域从这里开始
        <Frame resolver={{ TextComponent, Container }}>
          <Element canvas is={TextComponent} text="我已经在这里渲染了" />
        </Frame>
      </Editor>
    </div>
  );
};

控制组件的编辑方式

页面编辑器的一个显而易见的要求是允许用户编辑组件。使用Craft.js，你可以控制这些组件的编辑过程。

在下面的例子中，当用户点击一个组件时，我们会显示一个模态框，要求用户为text属性输入一个值。随着输入值的变化，组件将以更新后的属性重新渲染。

import { useNode } from "@craftjs/core";

const TextComponent = ({ text }) => {
  const {
    connectors: { connect, drag },
    isClicked,
    actions: { setProp },
  } = useNode((state) => ({
    isClicked: state.events.selected,
  }));

  return (
    <div ref={(dom) => connect(drag(dom))}>
      <h2>{text}</h2>
      {isClicked ? (
        <Modal>
          <input
            type="text"
            value={text}
            onChange={(e) => setProp(e.target.value)}
          />
        </Modal>
      ) : null}
    </div>
  );
};

有了这个，你就可以轻松实现内容可编辑文本或拖动调整大小的组件，就像任何现代页面编辑器一样。

具有可放置区域的用户组件

假设我们需要一个"容器"组件，用户可以将其放入编辑器中。此外，我们还希望用户能够将其他组件拖放到容器中。

在Craft.js中，只需调用<Canvas />就能轻松实现：

import {useNode} from "@craftjs/core";
const Container = () => {
  const { connectors: {drag} } = useNode();

  return (
    <div ref={drag}>
      <Canvas id="drop_section">
         // 现在用户可以将组件拖放到这个区域
        <TextComponent />
      </Canvas>
    </div>
  )
}

可扩展性

Craft.js 提供了一个表达能力强的 API，让你可以轻松读取和操作编辑器状态。假设你想为组件实现一个复制功能：

import {useEditor, useNode} from "@craftjs/core";
const Container = () => {
  const { actions: {add}, query: { createNode, node } } = useEditor();
  const { id, connectors: {drag, connect} } = useNode();
  return (
    <div ref={dom => connect(drag(dom))}>
      ...
      <a onClick={() => {
        const { data: {type, props}} = node(id).get();
        add(
          createNode(React.createElement(type, props));
        );
      }}>
        复制我
      </a>
    </div>
  )
}

可序列化的状态

编辑器的状态可以被序列化为 JSON，然后你可以对其应用你选择的压缩技术进行存储。

const SaveButton = () => {
  const { query } = useEditor();
  return <a onClick={() => console.log(query.serialize()) }>获取 JSON</a>
}

当然，Craft.js 也能够从 JSON 字符串中重新创建整个状态。

const App = () => {
  const jsonString = /* 从服务器获取 JSON */
  return (
    <Editor>
      <Frame json={jsonString}>
        ...
      </Frame>
    </Editor>
  )
}

这适合谁？🤔

如果你符合以下情况，你应该使用它：

✅ 你想根据自己的 UI 规范设计页面编辑器。使用 Craft.js，你几乎可以控制页面编辑器的每个外观和感觉方面。
✅ 你喜欢 React 生态系统。作为一个 React 框架，你不仅可以声明式地构建用户界面，还可以扩展成千上万的现有 React 组件来用于你的页面编辑器。
✅ 你是班上最酷的孩子 😎

如果你符合以下情况，你不应该使用它：

❌ 你需要一个开箱即用的页面编辑器。Craft.js 是一个抽象层，你需要在其基础上实现自己的页面编辑器。例如，它并不自带现成的用户界面。
- 然而，你仍然可以考虑使用示例作为起点。

额外的包 :tada:

@craftjs/layers 一个类似 Photoshop 的图层面板

致谢 :raised_hands:

react-dnd React 拖放库。虽然这里实际上没有使用它，但 Craft.js 的许多方面都是参考 react-dnd 编写的，同时借鉴了一些实用工具和函数。
Grape.js HTML 网页构建框架。这为 Craft.js 提供了灵感。Craft.js 中使用的元素定位逻辑是从 Grape.js 借鉴的。
use-methods 处理 reducers 时非常方便的 hook。Craft.js 使用了稍微修改过的 use-methods 版本，以更好地适应我们的 API。

获取帮助 :wave:

如果你有问题或想讨论某些内容（例如：贡献），请前往我们的 Discord 服务器。

赞助 :heart_decoration:

Craft.js 是在 MIT 许可下发布的，并且是用 100% 的爱构建的。如果你觉得它有用，并希望确保它能继续开发，请考虑成为赞助者/支持者，或通过 <a href="https://github.com/sponsors/prevwong" target="_blank">Github Sponsor</a>、<a href="https://opencollective.com/craftjs/contribute" target="_blank">Open Collective</a> 或 <a href="https://ko-fi.com/prevwong" target="_blank">Ko-fi</a> 进行一次性捐赠。