Docbone

Toolkits for web document editing system's frontend.

Development

make dev

打开浏览器即可访问 Demo 页面。

目录说明

src

docbone 的核心模块，包含以下几个主要内容：

• Model（文档模型）：渲染器和编辑器都会使用文档模型作为数据来源。
• Renderer（渲染器）：理论上来讲，渲染器会分类型，比如 Web、Pdf、图片等。渲染器可以理解成 Web 类型的渲染器。渲染器根据文档模型的定义进行渲染。
• Editor（编辑器）：编辑器编辑的是文档模型，牵涉到的概念比较多：redo/undo、节点结构编辑、节点选择、节点编辑面板描述、节点的拖动、拖拽改变大小、拖拽改变旋转角度等等。

examples

examples 目录下使用 docbone 构建的可视化编辑器 Demo 页面，应该会按照复杂度的维度来做，目前想到的三个 Demo 如下：

• 简单：一个简单的图片编辑器，可以选择图片后为图片添加文本、图形，并可以动态修改文本、图形的属性。
• 中等：一个 H5 页面或者 Keynote 编辑器，可以编辑多页，每一页上有文本、图形、图片等。
• 复杂：Element Page Builder，之所以比 H5 页面的复杂，是因为牵涉到节点结构编辑（添加、删除、多级移动等）。而且一般情况下，还需要有自定义的交互，比如点击了某个按钮，就提交一个表单等。

License

MIT