Build Custom Toolbar Buttons for Dynamic Content

Have you ever wanted to add your own custom button to your WYSIWYG editor that instantly inserts your favourite content template?

Maybe a styled callout box, a testimonial card, or a formatted code snippet, whatever you use often. Custom toolbar buttons save you tons of time and help keep your content consistent and clean.

In this guide, I’ll show you how to create custom toolbar buttons in JavaScript-based WYSIWYG editors. I’ll be using Froala Editor’s API for the examples since it makes the process straightforward, but the same idea works in most WYSIWYG editors.

By the end, you’ll be able to add your own custom buttons that insert nicely formatted content blocks with just a single click.

pic.twitter.com/8jUHELm2nv
— Evan (@itsEvanCC) October 19, 2025

Key Takeaways

Custom toolbar buttons let you insert reusable content templates with just one click.
Froala’s custom button API makes it very easy to extend the editor’s functionality.
You can insert HTML content dynamically using the editor’s insertion methods.
Custom buttons help you work faster and keep your content design consistent.
You only need basic JavaScript to build these, nothing too advanced.

Now that you know what we’ll be covering, let’s start with the basics: what exactly are custom toolbar buttons?

Table of Contents

What Are Custom Toolbar Buttons?

Custom toolbar buttons are basically extra buttons you can add to your editor that do exactly what you need.

Instead of typing or pasting the same HTML again and again, you just click a button and it appears automatically.

Think of them as shortcuts for your most-used content blocks, like:

Alert boxes or callouts
Testimonial cards
Code snippet containers
Custom layouts
Styled information boxes

So now that you know what these buttons do, let’s go ahead and start creating them.

Setting Up Your Editor

Before creating custom buttons, you’ll need a basic Froala Editor setup. Here’s the simplest way to get started:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>Custom Toolbar Buttons</title>

<!– Froala CSS –>
<link
href=”<https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css>”
rel=”stylesheet”
/>
</head>
<body>
<div id=”editor”></div>

<!– Froala JS –>
<script src=”<https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js>”></script>

<script>
// Initialize the editor
new FroalaEditor(“#editor”);
</script>
</body>
</html>

This gives you a basic editor with all the standard formatting buttons. Now let’s add our custom buttons to it.

Creating a Simple Callout Button

Let’s create a button that inserts a styled callout box. It’s perfect for highlighting important information.

What this code does:

DefineIcon creates the button’s visual appearance (💡 here).
RegisterCommand defines what happens when the button is clicked.
callback function contains the logic for inserting the callout box.
this.html.insert() adds the HTML at the cursor position.
Initialising FroalaEditor with the button adds it to the toolbar alongside default formatting options.

Creating a Testimonial Card Button

Now, let’s create a testimonial card with a quote, the author, and their company.

What this code does:

DefineIcon creates a custom toolbar button with a 💬emoji.
RegisterCommand sets what happens when the button is clicked.
callback contains the logic for inserting a testimonial card.
this.html.insert() adds the testimonial HTML at the current cursor position.
Initialising FroalaEditor with toolbarButtons adds the custom button to the editor toolbar.
Users can click the button and then customise the placeholder text with their actual testimonial content.

Code Snippet Container

If you’re creating technical docs, a button to insert code snippets can be a real time-saver:

What this code does:

DefineIcon creates a custom toolbar button using Froala’s built-in codeView icon.
RegisterCommand sets what happens when the button is clicked.
callback contains the logic to insert a styled code block with a language label and sample code.
this.html.insert() inserts the code block HTML at the current cursor position.
Initialising FroalaEditor with toolbarButtons adds the custom Insert Code Block button to the editor.
Clicking the button creates a dark-themed code block that looks professional and is easy to read.

Best Practices for Creating Custom Buttons

Creating custom buttons isn’t just about adding features, it’s about making the editor easier to use. These tips will help you build buttons that work well and are easy for users to use.

Keep HTML simple: Use basic inline styles rather than complex CSS classes. This ensures your content looks consistent even if you copy it to other platforms. For more tips, check out practices for WYSIWYG editors.
Add breathing room: Always add a paragraph break (<p><br></p>) after your inserted content so users can easily keep typing.
Use semantic HTML: Inline styles are fine for quick templates, but using proper HTML structure makes your content more meaningful and easier to maintain:

<aside class=”callout”>
<strong>Note:</strong> Your content here
</aside>

Make content editable: Make sure anything you insert can be easily changed. Avoid deeply nested structures that are hard to edit.
Test undo/redo: Using undo: true option in your button setup lets users easily undo the insertion if needed.
Provide clear icons: Use icons that clearly show what the button does. Froala has lots of built-in SVG icons you can choose from.

Common Pitfalls to Avoid

Even small mistakes can make custom buttons harder to use or maintain. Here are a few common issues to watch out for when building and testing your buttons.

Forgetting the callback context: Always use this.html.insert() inside the callback. Here, this points to the editor instance.
Overly complex HTML: Avoid complex nested divs, they’re tricky to edit and maintain. For advanced layouts, use the editor’s built-in tools.
Test on mobile: Make sure your buttons and inserted content work well on mobile devices.
Forgetting toolbar configuration: Remember to add your custom button to the toolbarButtons array, or it won’t show up.

Conclusion

Creating custom toolbar buttons in your WYSIWYG editor is easier than you might think. With just a few lines of JavaScript, you can add buttons that insert nicely formatted content blocks with a single click.

We’ve covered three examples: callouts, testimonials, and code snippets, but you can make buttons for almost anything, like:

Pricing tables
FAQ sections
Image galleries
Custom forms
Product showcases

If you want more inspiration, check out Froala’s examples.

The key is to start simple, test your buttons, and add more features as you get comfortable with the API. It will save you lots of time and keep your content looking consistent.

About the Author

Shefali Jangid is a web developer, technical writer, and content creator passionate about building intuitive developer tools and educational resources. She shares tutorials, code snippets, and practical tips on her blog, shefali.dev, helping developers create better web experiences with clean, efficient, and accessible code.