BlockSuite 预设编辑器5 分钟跑通 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 端块级协作编辑组件库。blocksuite/presets 里的 PageEditor 和 EdgelessEditor 两个组件挂上文档对象就能编辑适合做类 Notion 文档和白板应用的开发者。它到底帮你省了什么从零搭编辑器这三件事最耗时间块渲染与交互。段落、标题、列表、代码、图片、YouTube 嵌入每一类都要单独写。在 packages/blocks/ 的注册表里它们已经写成 BlockSpec描述这个块长什么样、怎么渲染的规格对象一个数组导入全部生效。文档数据结构。内容存放在 CRDTConflict-free Replicated Data Type无冲突复制数据类型文档里。把 Doc 对象赋给编辑器撤销重做、协同同步都长在数据层不用自己实现。页面和画布两套壳。同一份 Doc 既能渲染成页面也能渲染成无限画布。两者共用数据只是外壳不同。5 分钟跑通最小闭环克隆并安装依赖本地开发直接克隆仓库安装git clone https://gitcode.com/GitHub_Trending/bl/blocksuite cd blocksuite pnpm install建文档并挂载编辑器这段代码只做一件事在内存里建一份文档把编辑器组件挂到页面上import { AffineEditorContainer } from blocksuite/presets; import { DocCollection, Schema } from blocksuite/store; import { AffineSchemas } from blocksuite/blocks; const collection new DocCollection({ schema: new Schema().register(AffineSchemas) }); const editor new AffineEditorContainer(); editor.doc collection.createDoc({ id: page1 }); document.body.appendChild(editor);验证闭环跑通浏览器里出现可输入的文档区域即成功。想接框架参照 examples/react-basic 里的写法仓库里 Vue、Solid、Svelte 也各有一份对应示例。核心能力拆解挂载编辑器壳page-editor和edgeless-editor是 packages/presets/ 里定义的两个 Web Component接收doc属性后开始渲染文档没有根块时保持空白通过specs属性决定启用哪些块默认值是预设规格数组PageEditor 暴露hasViewport开关控制是否渲染外层滚动容器监听doc.slots.rootAdded槽位切换文档后自动重渲染装配块规格注册表PageEditorBlockSpecs 与 EdgelessEditorBlockSpecs 是两份规格数组把根块、段落/列表/代码等公共块、画布块组合成列表导入时向 SpecProvider 注册 page 与 edgeless 两个键只实例化列表里的块未启用的块代码不会被加载边界规格决定编辑器里有什么编辑器壳只决定怎么呈现装配周边碎件fragments 是挂在编辑器外围的独立组件doc-title渲染文档标题输入区outline从标题块生成侧边大纲frame-panel管理白板模式下的画框列表comment提供评论入口边界碎件不定义块只读 Doc 并响应它的槽位事件挂载自定义块这段代码演示把自己的块塞进预设编辑器import { PageEditor } from blocksuite/presets; import { PageEditorBlockSpecs } from blocksuite/blocks; const editor new PageEditor(); editor.doc doc; editor.specs [...PageEditorBlockSpecs, MyBlockSpec]; document.body.appendChild(editor);它们是怎么拼在一起的链路一句话Doc数据→ Spec注册→ EditorHost挂载→ DOM呈现。输入一份 CRDT 文档所有内容变更只走它处理编辑器壳里的 EditorHost 挂载时按 doc 中的块类型逐个查规格列表实例化模型层与视图层并接好服务和事件系统输出块树渲染成 DOM用户输入再写回 doc形成闭环什么场景该用哪个组件适用场景PageEditor长文档、列表式排版EdgelessEditor白板、自由布局AffineEditorContainer页面白板双模式切换fragments标题、大纲等外围件第三行组件在仓库中标了 deprecated用它前先读踩坑第 4 条。踩坑与调优Node 端一 import 就报错。现象SSR 构建时抛 SSR mode... not supported。原因presets 在模块顶层检查 window编辑器依赖 DOM 和单例。解法只在浏览器引入SSR 场景用动态 import。控制台报 already imported。现象重复导入后提示会破坏构造器检查。原因bundle 里存在两份模块实例Yjs 的 instanceof 判断失效。解法让构建产物只保留一份依赖注意 workspace 版本冲突。挂载后编辑器空白。现象赋了 doc 却不渲染。原因doc.root 为空时 render 直接返回 nothing。解法在 createDoc 的回调里先建出根块再赋给 editor.doc。组合容器在重构。现象AffineEditorContainer 标注 deprecated。原因官方在重写页面/白板切换实现。解法新代码用 PageEditor 加 EdgelessEditor 配合 docMode 切换过渡方案看 editor-container.ts 源码。下一步从规格注册表往下挖预设编辑器把块渲染、数据模型、双模式切换收敛成一次属性赋值。去翻 packages/blocks/src/specs/preset 的注册表看默认装配了哪些块。【免费下载链接】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），仅供参考
企业数字化 ERP 产品动态
相关推荐
SWE-bench 快速上手指南：用真实 GitHub Issue 评测大模型的编程能力 SWE-bench 快速上手指南：用真实 GitHub Issue 评测大模型的编程能力 【免费下载链接】SWE-bench SWE-bench: Can Language Models Resolve Real-world Github Issues? 项目地址: https://gitcode.com/GitHub_Trending/sw/SWE-bench
SWE-bench 是用真实 GitH… · 2026/9/26 2:01:57
开发一个 APP 到底要多少钱？从棋牌源代码开发看定制、二开与组件接入成本 ** 开发一个 APP，为什么不同方案的报价相差很大？本文结合棋牌源代码开发中的房间、玩法规则、结算和断线重连，分析从零定制、现成源码二开与组件接入的费用差异。同时用可运行的预约业务示例，讲解重复请求、事务和接口适配背后的开… · 2026/9/26 2:34:57
基于深度学习的FAQ问答系统实战：语义匹配、数据清洗与模型训练 简介：这是一套以毕业设计为场景、基于深度学习的FAQ问答系统项目包，适合计算机、人工智能、通信工程等专业的在校学生使用，也可用于课程设计、项目演示或二次开发。项目按问答系统常见流程组织，覆盖意图识别、文本匹配、检索排序、… · 2026/9/26 2:34:51
SoLab AI逆向工作台：集成DEX/SO/Flutter的安卓逆向分析利器 很多做安卓安全研究、App合规检测、恶意代码分析的朋友，应该都有过这样的体会：拿到一个APK，第一件事就是用jadx打开看一眼Java层代码，再用IDA或者Ghidra去啃Native库，遇到Flutter应用更是头疼，Dart AOT编译… · 2026/9/26 2:34:51
月满中秋，智联同行｜上海禾斗匕匕网络科技祝您中秋快乐 秋风送爽，明月渐圆。值此中秋佳节，上海禾斗匕匕网络科技有限公司向一路同行的客户、合作伙伴，以及每一位辛勤付出的同事，致以诚挚的问候和美好的祝福！
一轮明月，照见团圆，也照见每一份用心的陪伴… · 2026/9/26 2:34:51
5G网络仿真安全指南：OAI威胁模型与加密配置实操 这个系列写到第15期，前前后后聊了不少关于5G网络仿真的组网、协议栈、参数调优和实测分析。按计划这期该说安全了，但我得提前说一句：这块在仿真圈子里，确实是长期被忽视的角落。很多人搭好一套基于OAI、ns-3或OMNeT的5G仿真环境&a… · 2026/9/26 2:34:51
数据库课后习题答案别硬背：当测试用例集刷，效率翻倍 简介：万常选版《数据库原理与设计》课后习题答案资源，覆盖第2至6章及第9章，适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件，含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21
OpenClaw 替代品？Hermes Agent 踩坑实录：macOS 飞书接入 TaoToken 配置 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40
向下兼容与向上兼容：接口设计中的兼容性策略与工程实践 一次版本升级事故，是很多团队绕不过去的坎。线上环境里，服务端明明已经上线了新版接口，老的移动端还在照着旧文档传参数。请求一到网关，校验直接拒绝，用户操作失败，客服群炸了锅，开发群里开始互… · 2026/9/26 0:00:46
