BlockNote
文档文档AIAI示例示例定价定价关于关于
GitHubGitHubDiscordDiscord
  • 概述
    • Basic Setup
    • Displaying Document JSON
    • Multi-Column BlocksPro
    • Default Schema Showcase
    • Removing Default Blocks from Schema
    • Manipulating Blocks
    • Displaying Selected Blocks
    • Use with Ariakit
    • Use with ShadCN
    • Localization (i18n)
    • Change placeholder text
    • Multi-Editor Setup
    • Custom Paste Handler
    • Upload Files
    • Saving & Loading
    • Upload Files to AWS S3Pro
    • Rendering static documents
    • Removing UI Elements
    • Adding Formatting Toolbar Buttons
    • Adding Block Type Select Items
    • Adding Block Side Menu Buttons
    • Adding Drag Handle Menu Items
    • Adding Slash Menu Items
    • Replacing Slash Menu Component
    • Changing Emoji Picker Columns
    • Replacing Emoji Picker Component
    • Grid Mentions Menu
    • Uppy File PanelPro
    • Static Formatting Toolbar
    • UI With Third-Party ComponentsPro
    • Experimental Mobile Formatting Toolbar
    • Advanced Tables
    • Adding CSS Class to Blocks
    • Changing Editor Font
    • Overriding CSS Styles
    • Overriding Theme CSS Variables
    • Changing Themes Through Code
    • Code Block Syntax Highlighting
    • Custom Code Block Theme & Language
    • Converting Blocks to HTML
    • Parsing HTML to Blocks
    • Converting Blocks to Markdown
    • Parsing Markdown to Blocks
    • Exporting documents to PDFPro
    • Exporting documents to .docx (Office Open XML)Pro
    • Exporting documents to .odt (Open Document Text)Pro
    • Exporting documents to React EmailPro
    • Alert Block
    • Mentions Menu
    • Font Style
    • PDF BlockPro
    • Alert Block with Full UX
    • Toggleable Custom Blocks
    • Collaborative Editing with PartyKit
    • Collaborative Editing with Liveblocks
    • Collaborative Editing with Y-Sweet
    • Comments & Threads
    • Threads Sidebar
    • TipTap extension (arrow InputRule)Pro
    • Rich Text editor AI integration
    • AI Playground
    • Adding AI Menu Items
Question? Give us feedback → (opens in a new tab)在 GitHub 上编辑此页面
示例
UI 组件
Adding Formatting Toolbar Buttons

Adding Formatting Toolbar Buttons

In this example, we add a blue text/background color and code style button to the Formatting Toolbar.

Try it out: Select some text to open the Formatting Toolbar, and click one of the new buttons!

Relevant Docs:

  • Changing the Formatting Toolbar
  • Manipulating Inline Content
  • Editor Setup
Removing UI ElementsAdding Block Type Select Items

Footer

BlockNote

BlockNote 是一款可扩展的 React 富文本编辑器,支持基于块的编辑、协作功能,并提供开箱即用的可定制 UI 组件。

学习

  • 文档
  • 示例
  • 发布版本

合作

  • 与我们合作
  • 赞助
  • 贡献

社区

  • GitHub
  • Discord

法律

  • 使用条款
  • 隐私政策

主题

简中文档|沪ICP备2024070610号-3