基础节点手册

BasicNodesPlugin注册便签、文字、形状、画框、组合、图片和基础堆叠布局。Editor默认已装配；直接使用Core时需要自行安装。

本页示例使用已创建的Editor，SkyNoteEditor类型从@skynote/editor导入。

便签、文字与形状

export function addBasicContent(editor: SkyNoteEditor<HTMLElement>): void {
  editor.createNode({ nodeType: 'sticky', x: 0, y: 0, options: { text: '记下一个想法', color: 'yellow' } });
  editor.createNode({ nodeType: 'shape', x: 260, y: 0, options: { geometry: 'diamond', label: '换个角度？' } });
  editor.createNode({ nodeType: 'free-text', x: 20, y: 260, options: { text: '把零散的线索连接起来。' } });
}

nodeType	创建options	默认与特性
`sticky`	`text?: string`、`color?: StickyColor`	默认200×200、黄色、比例锁定；固定外框，放不下时省略
`free-text`	`text?: string`	默认适应内容，字体测量后派生尺寸；没有可见底色
`shape`	`geometry?: ShapeGeometry`、`label?: string`	默认矩形；椭圆、菱形、三角形、星形可选，标签可编辑

便签颜色名称为yellow/orange/pink/purple/blue/teal/green/gray。这是语义调色板引用，宿主可以通过主题调色板影响实际颜色。

普通形状默认160×100，三角形与星形默认120×120。需要覆盖尺寸时，在创建请求顶层提供width/height，不把公共几何塞入options或data。

文本尺寸与样式

自由文本的三种排版状态由文本块sizing表示：

状态	变化方式
`auto-width`	按内容确定宽高，默认不折行
`auto-height`	固定宽度，按文字折行撑高
`fixed`	固定文字框宽高，溢出按对应规则展示

水平拖动、垂直拖动和四角缩放可能采用不同的节点缩放策略。不要把“改节点外框”与“直接改字号”视为同一操作。

export function formatCurrentText(editor: SkyNoteEditor<HTMLElement>): void {
  editor.textEditor.toggleFormat('bold');
  editor.textEditor.applyStyle({ color: '$text', fontSize: 18 });
  editor.textEditor.setAlign('left');
}

文字格式方法作用于当前格式目标：编辑中有文字选区时影响该范围；空选区可能设置后续输入的样式；没有格式目标时不应假定一定修改了某个节点。字号、颜色、水平对齐和垂直对齐分别处理，垂直对齐只对有固定高度的文字块有意义。

画框

export function addFrame(editor: SkyNoteEditor<HTMLElement>): string | null {
  return editor.engine.documentStore.batch(() => {
    const frame = editor.createNode({
      nodeType: 'frame',
      x: 0,
      y: 0,
      autoWrap: false,
      width: 600,
      height: 360,
      options: { title: '讨论区' }
    });
    if (!frame) return null;
    editor.createNode({ nodeType: 'sticky', parentId: frame, x: 24, y: 24, options: { text: '相对于画框的位置' } });
    return frame;
  }, '创建讨论区');
}

frame的options为title?: string，默认480×320。标题在框外，子节点在框内；支持接收拖入内容，超出外框的子节点按裁剪规则处理。parentId决定归属，子节点坐标相对于画框。

创建画框时autoWrap默认收纳完全落在其中的同层内容。示例显式关闭该行为，再创建指定子节点，避免意外收纳页面原有节点。

setFrameAutoLayout(frameIds, options)用于开启、修改或关闭堆叠布局。启用后部分尺寸和位置由布局控制，宿主应查询可缩放轴，不强行把布局控制的几何覆盖成任意值。

组合

组合没有可见底色，不裁剪成员，也不通过拖入自动收纳。它由groupNodes(ids)把已有节点组合生成，不提供空组合新建流程。

移动组合时成员相对位置保留。取消组合使用ungroupNodes，不是删除；删除组合会级联影响成员。解组和框选行为由真实成员几何决定，不只按空白外框判断。

图片

图片模型使用node.image.assetId引用资产表，fit可为fill/cover/contain/none。低层创建选项包含assetId/intrinsicWidth/intrinsicHeight，但应用通常应调用insertImage(file, point)，让宿主适配器完成登记与资源管理。

没有AssetAdapter或对应资产时，不将JSON里的引用当成可显示的图片。加载、解码、重试与导出见文档与媒体API。

常见问题

现象	原因与处理
便签文字被省略	外框固定；加大尺寸、减少文字或显式适应内容
自由文本初始尺寸异常	确认字体测量器已由渲染适配器注入，字体也已可用
修改width后高度跟着变化	节点比例锁定或特定缩放策略生效
子节点移到画框外不显示	检查父容器与裁剪；需要移出时改变归属，不只改坐标
修改文档对象却没有撤销记录	改为调用语义命令，不直接给实体赋值

基础节点手册 ​

便签、文字与形状 ​

文本尺寸与样式 ​

画框 ​

组合 ​

图片 ​

常见问题 ​

基础节点手册

便签、文字与形状

文本尺寸与样式

画框

组合

图片

常见问题