低代码编辑器作为一种能够极大地提升开发效率的PaaS软件，近些年来一直收到各大公司以及各路投资方的追捧。而对于我们前端开发者来说，编辑器也是为数不多的拥有较深前端技术深度的开发场景。,通过本篇文章，你能够学会如何基于 React 技术栈搭建一个最简单的低代码编辑器，以及部分重点功能的实现方式。,本文示例代码已经开源到 GitHub 上，有需要的朋友们可以自取：https://github.com/shadowings-zy/mini-editor 。简单预览下这个编辑器的 demo：,先上一张原型图：,请添加图片描述,对于大部分低代码编辑器来说，都是由「组件区」、「画布区」、「属性编辑区」这三个部分组成的。,而针对这三个区域所负责的职责，我们能够很容易地设计出这三个区域所需要实现的功能：,编辑器底层的数据格式是开发低代码编辑器的重中之重，画布区会根据这个数据去渲染画布，而组件的拖拽，组件属性的配置，实际上都是对这个数据的更改。,而回到我们编辑器本身，我们可以使用 json 格式的数据来抽象编辑器画布的内容，像下面这样：,定义好数据结构后，「组件属性编辑」、「拖拽新增组件」实际上都是对这个 json 数据中的 data 字段进行增删改，而画布区也会使用这个字段进行画布内组件的渲染。,整体代码结构如下：,在梳理重点逻辑之前，我们得先梳理下我们的编辑器组件需要维护哪些数据。,所以我们将这些数据维护在根组件下，并用 props 将它们传递给其他子组件，代码如下：,定义好这些数据之后，我们就来讲解一下重点逻辑的实现。,首先我们来看一下画布渲染逻辑的实现：,这里先要将画布区的布局调整为position: relative，然后将每个组件的布局设置为position: absolute，这样我们就能根据编辑器数据中的left和top属性来定位组件在画布的位置了。,然后就是遍历编辑器数据，将对应的组件渲染到画布上。具体代码如下：,接着，为了实现属性联动，我们需要实现以下几件事：,为了实现第一点，我们就要在画布组件中为每一个渲染出的组件添加点击事件了，使用 props 传入的setRightPanelType和setRightPanelElementId来设置对应选中的元素，代码如下：,而为了实现右侧面板能够实时编辑数据，我们首先需要根据传入的elementId，遍历编辑器数据，拿到要修改的项，然后获取对应的属性改动值，最后使用setDrawPanelData进行修改。具体代码如下：,最后就到了重中之重，如何实现拖拽，这里使用了react-dnd，react官方实现的拖拽库，文档参考这里：https://react-dnd.github.io/react-dnd/about 。,在react-dnd中，定义了drag和drop两种类型的组件，那么很显然，左侧面板中需要拖拽的是drag组件，画布是drop组件。,对于左侧需要拖拽的组件，我们使用react-dnd提供的useDrag钩子来使其可拖拽，代码如下：,对于画布，我们使用useDrop钩子，并用getClientOffset函数拿到拖拽的位置，计算出新增组件的left和top值，然后使用setData设置编辑器数据即可，代码如下：,当我们实现了编辑器的逻辑后，与后台交互的逻辑就相当简单了，向后台发起请求，存/取这个编辑器 json 数据就可以了，这里简单实现了向后台存数据的逻辑，代码如下：,后台接收到数据后，就可以将其存储到数据库中了。,通过上面这些步骤，我们就能实现一个最简单的低代码编辑器了，但是可以深入挖掘的技术点还有很多，下面我会列出来其中的一些点以及解决的思路。,对于组件嵌套，我们需要修改对于编辑器数据（就是json格式数据）的操作逻辑，从原先的「数组插入」，改变为针对某个层级的操作，同时，组件遍历的逻辑也要有所更改。,大部分工业界的编辑器实际上都做了这样一层抽象，对于不同属性编辑组件，会使用schema来描述这个编辑组件可编辑的项，以及这个编辑项所对应的可以更改的数据。而属性编辑组件实际上就是来消费这个schema进行渲染的。,这个涉及到文件分片上传，后端组合存储，可以看我之前实现的这个项目：https://github.com/shadowings-zy/easy-file-uploader。,本文因为实现的比较简单，把所有数据都放到了根组件下，然后作为props传参，但实际上，一个复杂的低代码编辑器组件层级很深，使用props不太现实，这种情况下使用redux等全局数据管理的库会比较方便。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">