示例
浏览下面的示例，了解如何使用和自定义 BlockNote。
想要贡献吗？复制这个 StackBlitz上 的基础示例 (opens in a new tab)并提交 PR。
基础
Basic Setup
matthewlipskiDisplaying Document JSON
yousefedMulti-Column BlocksPro yousefedDefault Schema Showcase yousefedRemoving Default Blocks from Schema
hunxjunedoManipulating Blocks matthewlipskiDisplaying Selected Blocks matthewlipskiUse with Ariakit matthewlipskiUse with ShadCN matthewlipskiLocalization (i18n) yousefedChange placeholder text
ezhil56xMulti-Editor Setup
areknawoCustom Paste Handler
nperez0111
后端
Upload Files matthewlipskiSaving & Loading yousefedUpload Files to AWS S3Pro matthewlipskiRendering static documents yousefed
UI 组件
Removing UI Elements matthewlipskiAdding Formatting Toolbar Buttons matthewlipskiAdding Block Type Select Items matthewlipskiAdding Block Side Menu Buttons matthewlipskiAdding Drag Handle Menu Items matthewlipskiAdding Slash Menu Items yousefedReplacing Slash Menu Component yousefedChanging Emoji Picker Columns yousefedReplacing Emoji Picker Component yousefedGrid Mentions Menu yousefedUppy File PanelPro ezhil56xStatic Formatting Toolbar matthewlipskiUI With Third-Party ComponentsPro matthewlipskiExperimental Mobile Formatting Toolbar areknawoAdvanced Tables nperez0111
主题化
Adding CSS Class to Blocks matthewlipskiChanging Editor Font matthewlipskiOverriding CSS Styles matthewlipskiOverriding Theme CSS Variables matthewlipskiChanging Themes Through Code matthewlipskiCode Block Syntax Highlighting nperez0111Custom Code Block Theme & Language nperez0111
互操作性
Converting Blocks to HTML matthewlipskiParsing HTML to Blocks matthewlipskiConverting Blocks to Markdown yousefedParsing Markdown to Blocks yousefedExporting documents to PDFPro yousefedExporting documents to .docx (Office Open XML)Pro yousefedExporting documents to .odt (Open Document Text)Pro areknawoExporting documents to React EmailPro
jmarbutt
自定义模式
Alert Block matthewlipskiMentions Menu yousefedFont Style matthewlipskiPDF BlockPro matthewlipskiAlert Block with Full UX matthewlipskiToggleable Custom Blocks matthewlipski
协作
Collaborative Editing with PartyKit yousefedCollaborative Editing with Liveblocks yousefedCollaborative Editing with Y-Sweet
jakelazaroffComments & Threads yousefedThreads Sidebar matthewlipski