主要参考两个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。
相关文章
开发
· 1 分钟阅读
Codex+Hyperframes:如何用一句话做一个产品介绍视频
用Codex+Hyperframes插件,只需一句话就能生成产品介绍视频,告别繁琐的视频制作流程。
开发
· 1 分钟阅读
Codex+Game studio:做游戏的好工具
推荐使用Codex+Game Studio插件制作浏览器小游戏,涵盖2D和3D游戏开发体验,以及基于Phaser引擎的实践分享。
开发
· 2 分钟阅读
如何使用AI UI Designer生成漂亮的UI和原型
介绍AI UI Designer的最新迭代功能,包括AI生成UI的手动编辑、统一设计系统,以及从规划到导出的完整设计工作流程。