5分钟集成 BlockSuite 预设组件PageEditor 与 EdgelessEditor 快速指南【免费下载链接】blocksuite Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.项目地址: https://gitcode.com/GitHub_Trending/bl/blocksuiteBlockSuite 是一套面向 Web 的内容编辑技术栈而它的预设组件位于 packages/presets/把最常见的两种编辑器形态封装成了开箱即用的现成组件文档型的 PageEditor 和无限画布型的 EdgelessEditor。这篇文章只讲三件事两者该怎么选、最小代价怎么跑起来、以及背后靠什么机制撑起可扩展性。 PageEditor 与 EdgelessEditor先想清楚你要做什么选错方向会浪费不少返工时间两个组件的定位差异其实很清晰维度PageEditorEdgelessEditor内容组织自上而下的块状流类似 Notion 文档自由坐标布局的画布类似白板适合场景企业文档、知识库、协作笔记头脑风暴、在线白板、思维导图关键能力块级内容组织、文本格式化、多级列表、表格与媒体嵌入自由拖拽定位、形状/文本/连接线等元素、缩放与平移默认块规格PageEditorBlockSpecsEdgelessEditorBlockSpecs一个实用判断法如果你的内容天然有顺序段落、章节、任务列表选 PageEditor如果内容的关键是位置关系谁连到谁、谁在谁旁边选 EdgelessEditor。两者也可以挂在同一个文档上共存切换视图即可。️ 如何安装依赖仓库使用 pnpm 管理 monorepo克隆后安装即可git clone https://gitcode.com/GitHub_Trending/bl/blocksuite cd blocksuite pnpm install如果你只关心在自己的项目里用直接安装blocksuite/presets这个包就够了不必参与 monorepo 开发。 最简集成示例几行代码渲染出编辑器PageEditor 和 EdgelessEditor 本质上都是基于 Lit 的自定义元素分别注册为page-editor和edgeless-editor不绑定任何 UI 框架React、Vue、Svelte、Angular 或纯 HTML 里都能直接挂载。核心就是给一个 doc挂到 DOM 上import { PageEditor } from blocksuite/presets; const editor new PageEditor(); editor.doc doc; // doc 来自 blocksuite/store document.body.append(editor);想换成画布编辑器把类名换成EdgelessEditor即可其余写法完全一致。容器需要预先有高度编辑器内部会撑满父容器这步常被忽略导致编辑器渲染出来但一片空白。⚙️ 预设组件内部怎么工作块规格BlockSpecs预设包 packages/presets/ 统一导出了编辑器、块组件、片段fragments与辅助工具四部分。其中决定编辑器里有哪些块可用的是块规格BlockSpec数组PageEditor 默认使用PageEditorBlockSpecsEdgelessEditor 默认使用EdgelessEditorBlockSpecs这两个常量都来自 packages/blocks/ 包。编辑器组件内部会把specs传给底层的editor-host由它按规格装配出完整的块树与交互能力——这就是预设一词的含义默认规格下开箱即用规格数组决定了编辑器的功能边界。 扩展预设如何添加自定义块规格想给编辑器加自定义块时不需要重写编辑器只要扩展默认规格数组import { PageEditorBlockSpecs } from blocksuite/blocks; editor.specs [...PageEditorBlockSpecs, myCustomBlockSpec];specs是编辑器实例上的属性随时可替换。自定义块的编写方式与仓库内其他块一致一个 spec 描述这是什么块配套组件负责渲染与交互可参考 packages/blocks/ 下的各块目录。 落地建议按内容形态选型顺序型内容用 PageEditor关系型/空间型内容用 EdgelessEditor两者可同文档共存。用规格控制功能面只给业务真正用到的块规格能减小体积并简化交互心智。协作能力自带doc 基于 CRDT多端同步是内建能力集成时重点放在存储与同步通道的选型上。容器高度别漏挂载前确保父容器有明确高度否则编辑器视口不会正确撑开。预设组件把从零搭一个块编辑器的成本压到了配置级别——选对形态、喂好 doc、按需扩展规格剩下的交给 BlockSuite。【免费下载链接】blocksuite Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.项目地址: https://gitcode.com/GitHub_Trending/bl/blocksuite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考