核心概念
建议在完成 快速开始,并读过 入门中的 组件基础、文字样式、块级样式、选区 之后阅读本篇,把 数据模型 里的名词一次对齐;若你已熟悉树状文档与格式 / 属性用法,也可把本篇当作查阅。
文档是一棵树
Textbus 把编辑器里的内容建成一棵 组件树:有一个 根组件,其下是 块级子节点(例如段落、标题、一条待办);块里再通过 插槽 容纳文本或更小的 行内结构。用户的输入、粘贴与协作变更,最终都反映在这棵树及其附带 格式 信息上;视图层只负责把当前模型画出来,不以 DOM 为唯一真相来源。
每一块组件由 视图函数 渲染成 DOM:表格常见为 一个表格组件在视图里画出整张 table、多个单元格里各自 slotRender;列表 / 待办常见为 一行一个块,视图里画出该行外壳(如勾选区 + 正文插槽)。数据上仍是组件树与插槽;页面上长什么样由视图实现。详见 组件基础。
组件
组件(Component)是树上的节点类型,带有:
componentName:在内核中注册的名称,也是 视图适配器 里「组件 ↔ 视图函数」映射用的键。type:块级 或 行内,对应枚举ContentType(例如块级段落、行内占位控件)。类型决定了组件能否并列插在某一插槽里、以及如何参与换行、删除等默认规则。- 状态
state:普通对象,描述该节点的业务数据;常见字段里会包含一个或多个Slot,用来挂子内容。 setup:组件初始化时注册 钩子(如onContentInsert、onBreak),在内核提供的上下文里响应编辑事件;索引见 组件事件与生命周期。
序列化场景下可实现 fromJSON,把 字面量状态 还原成运行时实例(见快速开始中的写法)。
插槽
插槽(类型名为 Slot)是组件内部承载内容的容器:里面可以是 文本片段、嵌套的 块或行内组件,并按一份 schema(允许的 ContentType 列表)约束能插入什么。
- 文本与组件在插槽里按顺序排列,形成 线性文档流;块级组件通常占据独立段落位置。
- 插槽上还维护 格式 与 属性(见下节):格式标在文本区间上(如某几个字加粗),属性作用在整个插槽上(常见为 块级样式 或整插槽业务信息),而不必为每种效果单独造组件节点。
在视图里,一般通过注入的 Adapter 的 slotRender,把某个插槽渲染成宿主框架下的 虚拟节点(快速开始里的 p、根 div 即为此类外壳)。
**展开说明(schema、游标、insert / cut / toDelta 等)**见独立篇 插槽。
格式与属性
- 格式(Formatter):作用在插槽内 任意连续文本区间 上,常用于 行内样式 或只标记插槽里 一部分内容(加粗、颜色、链接等)。由
Formatter注册到编辑器,内核负责合并重叠区间、继承规则与渲染优先级。 - 属性(Attribute):作用在插槽 整体 上,常用于 块级样式(如对齐、列表缩进等包裹整块内容的外观),也可用于给 整个插槽 附加业务信息;由
Attribute的render写到承载该插槽内容的虚拟节点上。默认情况下,属性还会应用到当前插槽内 嵌套组件各自的插槽(配置onlySelf: true时可改为仅作用于当前插槽)。
二者都与「纯文本 + 树状组件」解耦:区间内的样式交给格式,整插槽 / 块级外观交给属性,从而减少不必要的组件节点与协作合并复杂度。
模型与视图的关系
- 内核(
@textbus/core):维护组件树、插槽、格式、选区、命令与历史。 @textbus/platform-browser:把编辑行为接到浏览器(输入、选区桥接等)。- 视图适配器(Viewfly / Vue / React):根据当前组件实例,调用你注册的 视图函数,在视图函数里对
state里的插槽做slotRender。
同一份模型可以换适配器渲染;换框架时通常只需重写视图侧,数据结构 与 编辑逻辑 可大量复用。
