登录

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

作者:neo yang 时间:2021/12/12 读: 3812
主要参考两个block编辑器: wordpress的古腾堡编辑器: https://wordpress.org […]

主要参考两个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。

标签:


copyright © www.lyustu.com all rights reserve.
Theme: TheMoon V3.0. Author:neo yang