从零开始实现一个简单的低代码编辑器

一、写在前面

低代码编辑器作为一种能够极大地提升开发效率的PaaS软件，近些年来一直收到各大公司以及各路投资方的追捧。而对于我们前端开发者来说，编辑器也是为数不多的拥有较深前端技术深度的开发场景。

创新互联是一家以网站设计建设，重庆小程序开发、网站开发设计，网络软件产品开发，企业互联网推广服务为主的民营科技公司。主要业务涵盖:为客户提供网站策划、网站设计、网站开发、域名与空间、网站优化排名、买友情链接等服务领域。凭借建站老客户口碑做市场，建设网站时，根据市场搜索规律和搜索引擎的排名收录规律编程，全力为建站客户设计制作排名好的网站，深受老客户认可和赞誉。

通过本篇文章，你能够学会如何基于 React 技术栈搭建一个最简单的低代码编辑器，以及部分重点功能的实现方式。

本文示例代码已经开源到 GitHub 上，有需要的朋友们可以自取：https://github.com/shadowings-zy/mini-editor 。简单预览下这个编辑器的 demo：

二、编辑器功能拆分

先上一张原型图：

请添加图片描述

对于大部分低代码编辑器来说，都是由「组件区」、「画布区」、「属性编辑区」这三个部分组成的。

组件区负责展示可拖拽的组件和组件间的层级关系。
画布区负责渲染拖拽的组件，并对其进行可视化展示。
属性编辑区负责编辑选中组件的属性。

而针对这三个区域所负责的职责，我们能够很容易地设计出这三个区域所需要实现的功能：

对于组件区，我们需要保证组件是可拖拽的，并且组件能与画布区交互
对于画布区，我们需要首先抽象出一个用于展现「画布区有哪些组件」的数据格式，然后画布区能够根据这个数据格式渲染对应的组件。其次，我们还需要实现拖拽后的组件与画布的交互，以及选中组件后与属性编辑区的交互。
对于属性编辑区，我们需要处理属性变更后，与对应组件的联动逻辑。

三、编辑器数据格式的定义

编辑器底层的数据格式是开发低代码编辑器的重中之重，画布区会根据这个数据去渲染画布，而组件的拖拽，组件属性的配置，实际上都是对这个数据的更改。

而回到我们编辑器本身，我们可以使用 json 格式的数据来抽象编辑器画布的内容，像下面这样：

{
  "projectId": "xxx", // 项目 ID
  "projectName": "xxx", // 项目名称
  "author": "xxx", // 项目作者
  "data": [
    // 画布组件配置
    {
      "id": "xxx", // 组件 ID
      "type": "text", // 组件类型
      "data": "xxxxxx", // 文字内容
      "color": "#000000", // 文字颜色
      "size": "12px", // 文字大小
      "width": "100px", // 容器宽度
      "height": "100px", // 容器高度
      "left": "100px", // 容器左边距
      "top": "100px" // 容器上边距
    },
    {
      "id": "xxx", // 组件 ID
      "type": "image", // 组件类型
      "data": "http://xxxxxxx", // 图片 url
      "width": "100px", // 容器宽度
      "height": "100px", // 容器高度
      "left": "100px", // 容器左边距
      "top": "100px" // 容器上边距
    },
    {
      "id": "xxx", // 组件 ID
      "type": "video", // 组件类型
      "data": "http://xxxxxxx", // 视频 url
      "width": "100px", // 容器宽度
      "height": "100px", // 容器高度
      "left": "100px", // 容器左边距
      "top": "100px" // 容器上边距
    }
  ]
}

定义好数据结构后，「组件属性编辑」、「拖拽新增组件」实际上都是对这个 json 数据中的 data 字段进行增删改，而画布区也会使用这个字段进行画布内组件的渲染。

四、项目代码结构

整体代码结构如下：

.
├── package
│   ├── client # 前端页面
│   │   ├── build # webpack 打包配置
│   │   │   ├── webpack.base.js
│   │   │   ├── webpack.dev.js
│   │   │   └── webpack.prod.js
│   │   ├── components # 前端组件
│   │   │   ├── textComponent # 组件区中的「文字组件」
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.css
│   │   │   └── textPanel # 「文字组件」对应的属性编辑组件
│   │   │       ├── index.tsx
│   │   │       └── style.css
│   │   ├── constants # 一些常量
│   │   │   └── index.ts
│   │   ├── index.html
│   │   ├── index.tsx
│   │   ├── pages # 前端页面
│   │   │   ├── app # 根组件
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.css
│   │   │   ├── drawPanel # 画布区
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.css
│   │   │   ├── leftPanel # 左侧组件区
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.css
│   │   │   └── rightPanel # 右侧属性编辑区
│   │   │       ├── index.tsx
│   │   │       └── style.css
│   │   ├── style.css
│   │   └── tsconfig.json
│   └── server # 后端代码
│       ├── app.ts # 后端逻辑
│       ├── config # 后端配置
│       │   ├── dev.ts
│       │   ├── index.ts
│       │   └── prod.ts
│       ├── constants.ts # 一些常量
│       └── tsconfig.json
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json

五、重点逻辑的实现

在梳理重点逻辑之前，我们得先梳理下我们的编辑器组件需要维护哪些数据。

首先是编辑器数据，画布需要根据编辑器数据来渲染内容，而添加组件和属性修改本质上都是对这个数据的改动。
其次是右侧面板的类型，编辑不同组件要有不同类型的编辑项。
另外还有当前选中的组件 id，右侧属性面板的改动都是对当前组件 id 生效的。

所以我们将这些数据维护在根组件下，并用 props 将它们传递给其他子组件，代码如下：

import DrawPanel from "../drawPanel"; // 画布
import LeftPanel from "../leftPanel"; // 左侧组件面板
import RightPanel from "../rightPanel"; // 右侧属性编辑面板
export default function App() {
  const [drawPanelData, setDrawPanelData] = useState([]); // 编辑器数据
  const [rightPanelType, setRightPanelType] = useState(RIGHT_PANEL_TYPE.NONE); // 右侧属性面板类型
  const [rightPanelElementId, setRightPanelElementId] = useState(""); // 右侧属性面板编辑的 id
  return (
    
      
              data={drawPanelData}
        setData={setDrawPanelData}
        setRightPanelType={setRightPanelType}
        setRightPanelElementId={setRightPanelElementId}
      >
              type={rightPanelType}
        data={drawPanelData}
        elementId={rightPanelElementId}
        setDrawPanelData={setDrawPanelData}
      >
    

  );
}

定义好这些数据之后，我们就来讲解一下重点逻辑的实现。

1、画布渲染

首先我们来看一下画布渲染逻辑的实现：

这里先要将画布区的布局调整为position: relative，然后将每个组件的布局设置为position: absolute，这样我们就能根据编辑器数据中的left和top属性来定位组件在画布的位置了。

然后就是遍历编辑器数据，将对应的组件渲染到画布上。具体代码如下：

// package/client/pages/drawPanel/index.tsx
interface IDrawPanelProps {
  data: any; // 将编辑器数据作为 props 传入组件中
}
export default function DrawPanel(props: IDrawPanelProps) {
  const { data } = props;
  const generateContent = () => {
    const output = [];
    // 遍历编辑器数据并渲染画布
    for (const item of data) {
      if (item.type === COMPONENT_TYPE.TEXT) {
        output.push(
                      key={item.id}
            style={{
              color: item.color,
              fontSize: item.size,
              width: item.width,
              height: item.height,
              left: item.left,
              top: item.top,
              position: "absolute",
              backgroundColor: "#bbbbbb",
            }}
          >
            {item.data}

);
}
}
return output;
};
return (
className="draw-panel"
ref={drop}
style={{
position: "relative",
}}
>
{generateContent()}

为了实现第一点，我们就要在画布组件中为每一个渲染出的组件添加点击事件了，使用 props 传入的setRightPanelType和setRightPanelElementId来设置对应选中的元素，代码如下：