skills.rest
kraftvaerk
kraftvaerkOFFICIAL
Explore all skills by this author →
WebsiteGitHub

umbraco-tiptap-toolbar-extension

Implement custom Tiptap toolbar extensions for the Umbraco rich text editor.

Updated Mar 6, 2026
Search Tags:#frontend#extension#rich text editor#tiptap#toolbar#umbraco
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-tiptap-toolbar-extension-kraftvaerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-tiptap-toolbar-extension
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-tiptap-toolbar-extension
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-tiptap-toolbar-extension-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of custom toolbar buttons and controls for Umbraco's Tiptap-based rich text editor, allowing for enhanced content creation workflows.

Core Features & Use Cases

  • Custom Toolbar Buttons: Add new buttons for specific formatting or actions.
  • Menu and Style Selectors: Implement dropdowns for selecting headings, styles, or colors.
  • Integration with Tiptap Extensions: Seamlessly link toolbar actions to underlying Tiptap editor functionalities.
  • Use Case: Add a "Call to Action" button to the rich text editor toolbar that, when clicked, opens a modal to configure a link and a specific CSS class for a prominent button style.

Quick Start

Implement a new bold button for the Tiptap toolbar in Umbraco by creating a manifest and an API class.

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 custom toolbar buttons to the Umbraco rich text editor?▼

To add custom toolbar buttons to the Umbraco rich text editor, you implement Tiptap toolbar extensions by creating a manifest and an API class that integrates with Umbraco's extension registry.

Can I implement dropdown menus and color pickers in the Umbraco Tiptap editor?▼

Yes, you can implement dropdown menus and color pickers in the Umbraco Tiptap editor. The extension supports menu, styleMenu, and colorPickerButton kinds for building these custom formatting controls.

How do I link custom toolbar actions to Tiptap editor functionalities in Umbraco?▼

You link custom toolbar actions to Tiptap editor functionalities in Umbraco by defining custom execute, isActive, and isDisabled methods within your extension API class to control editor behavior.

Do I need to understand the Umbraco extension manifest structure to build Tiptap toolbar extensions?▼

Yes, understanding the Umbraco extension manifest structure is required. Building Tiptap toolbar extensions relies on registering your custom buttons and menus correctly within this manifest framework.

What is the best way to create a Call to Action button in the Umbraco rich text editor?▼

The best way to create a Call to Action button in the Umbraco rich text editor is using a Tiptap toolbar extension that opens a modal to configure a specific link and CSS class for prominent button styling.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-tiptap-extension

Implement Tiptap extensions for custom nodes and marks in Umbraco's rich text editor.

Official
Intermediate
albanistrefialbanistrefi
4

umbraco-tiptap-toolbar-extension

Add custom Tiptap toolbar extensions to the Umbraco rich text editor.

Community
Intermediate
umbracoumbraco
26

umbraco-tiptap-toolbar-extension

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

Official
Intermediate
albanistalbanist
4

umbraco-tiptap-extension

Implement custom Tiptap extensions for the Umbraco rich text editor.

Community
Intermediate