umbraco-tiptap-toolbar-extension

Create toolbar extensions for the Umbraco rich text editor using Tiptap APIs.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-tiptap-toolbar-extension
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-tiptap-toolbar-extension
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-tiptap-toolbar-extension
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-tiptap-toolbar-extension

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables the creation and customization of toolbar extensions for Umbraco's rich text editor, allowing for enhanced user experience and functionality within the content editing interface.

Core Features & Use Cases

  • Custom Toolbar Buttons: Add new buttons to the rich text editor toolbar for specific actions.
  • Menu and Style Options: Implement dropdown menus and style selectors for richer text formatting.
  • Color Pickers: Integrate color selection tools directly into the toolbar.
  • Use Case: A content editor needs to apply a specific "callout" style to text. This skill allows for the creation of a custom toolbar button that applies this style with a single click.

Quick Start

Use the umbraco-tiptap-toolbar-extension skill to create a new button manifest for bold text.

Frequently Asked Questions about umbraco-tiptap-toolbar-extension

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a custom button to the Umbraco rich text editor toolbar?

You can create custom toolbar buttons for the Umbraco rich text editor by implementing a Tiptap toolbar extension manifest and registering it through the Umbraco extension registry to handle specific editor actions.

Can I add a color picker or dropdown menu to the Tiptap editor in Umbraco?

Yes, you can add a color picker or dropdown menu to the Tiptap editor in Umbraco by implementing toolbar extensions that support colorPickerButton, menu, and styleMenu kinds for richer text formatting interactions.

What do I need to know to customize the Umbraco Tiptap toolbar?

Customizing the Umbraco Tiptap toolbar requires an understanding of Umbraco extension types and Tiptap editor APIs to define custom execution logic for dynamic toolbar interactions within the content editing interface.

How do I apply a specific custom style to text in the Umbraco rich text editor?

You apply a specific custom style to text by creating a custom toolbar button extension that executes Tiptap API commands, allowing content editors to apply styles like a callout with a single click.

What are the supported extension kinds for Umbraco rich text editor toolbar customization?

The supported extension kinds for Umbraco rich text editor toolbar customization include standard buttons, colorPickerButton for color selection tools, menu for dropdown menus, and styleMenu for style selectors.