当前位置：首页 > 应用开发

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

一、从零写在前面

低代码编辑器作为一种能够极大地提升开发效率的开始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()}

);

}2、属性联动

接着，为了实现属性联动，我们需要实现以下几件事：

为画布上的组件添加点击事件，使其能够在点击时设置右侧属性编辑面板的内容。在右侧属性编辑面板编辑组件属性时，要能对编辑器数据中对应目标组件的数据进行改动，然后画布区根据新的编辑器数据进行渲染。

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

// package/client/pages/drawPanel/index.tsx

export default function DrawPanel(props: IDrawPanelProps) {

const { data, setRightPanelType, setRightPanelElementId } = 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

}}

+ // 在这里添加点击事件

+ onClick={ () => {

+ setRightPanelType(RIGHT_PANEL_TYPE.TEXT);

+ setRightPanelElementId(item.id);

+ }}

{ item.data}

);

}

return output;

};

// ... 其他逻辑

}

而为了实现右侧面板能够实时编辑数据，我们首先需要根据传入的elementId，遍历编辑器数据，拿到要修改的项，然后获取对应的属性改动值，最后使用setDrawPanelData进行修改。具体代码如下：

interface IRigthPanelProps {

type: RIGHT_PANEL_TYPE;

data: any;

elementId: string;

setDrawPanelData: Function;

}

export default function RightPanel(props: IRigthPanelProps) {

const { type, data, elementId, setDrawPanelData } = props;

const findCurrentElement = (id: string) => {

for (const item of data) {

if (item.id === id) {

return item;

}

return undefined;

};

const findCurrentElementAndChangeData = (

id: string,

key: string,

changedData: any

) => {

for (let item of data) {

if (item.id === id) {

item[key] = changedData;

}

setDrawPanelData([...data]);

};

const generateRightPanel = () => {

if (type === RIGHT_PANEL_TYPE.NONE) {

return

未选中元素;

} else if (type === RIGHT_PANEL_TYPE.TEXT) {

const elementData = findCurrentElement(elementId);

const inputDomObject = [];

return (

文字元素文字内容:

defaultValue={ elementData.data}

ref={ (element) => {

inputDomObject[0] = element;

}}

type="text"

文字颜色:

defaultValue={ elementData.color}

ref={ (element) => {

inputDomObject[1] = element;

}}

type="text"

文字大小:

defaultValue={ elementData.size}

ref={ (element) => {

inputDomObject[2] = element;

}}

type="text"

width:

defaultValue={ elementData.width}

ref={ (element) => {

inputDomObject[3] = element;

}}

type="text"

height:

defaultValue={ elementData.height}

ref={ (element) => {

inputDomObject[4] = element;

}}

type="text"

top:

defaultValue={ elementData.top}

ref={ (element) => {

inputDomObject[5] = element;

}}

type="text"

left:

defaultValue={ elementData.left}

ref={ (element) => {

inputDomObject[6] = element;

}}

type="text"

onClick={ () => {