做一个block编辑器的基本思路

Forfatter:neo yang Tid:2021/12/12 Læs: 3995

---

主要参考两个block编辑器：

wordpress的古腾堡编辑器： https://wordpress.org/gutenberg/

editorjs编辑器：https://editorjs.io/

一、架构

MVVM架构

M层：纯json，这一点参考editorjs。古腾堡的M层是和wordpress本身有比较重的绑定，（注释+短码），不值得参考。

V层：古腾堡的方式更合适一些。

VM层：无。

二、blocks

所有的block都有两种状态：show和edit。

查看由block编辑器创建的内容时，block的状态为show。

使用block编辑器编辑内容时，block的状态为edit。

两种状态的展示保持一致，实现“所见即所得”。

edit状态的block建立在basic block上。

三、basic block

所有的block都建立在这个basic block的基础上。

block的edit状态下的主要交互都在这里。

四、editor page

编辑器主页面，根据数据和数据变化渲染block。

五、block渲染器

查看block编辑器创建的内容时，需要解析json数据并根据json数据渲染blocks。