Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Three instances of TinyMCE with different toolbar configurations.

A toolbar for all occasions

Ben Long

April 7th, 2020

Written by

Ben Long
Ben Long

Category

Tips & How-Tos

Getting started with TinyMCE is super easy. But after setting it up for the first time, you may be thinking:

  • There aren’t enough options for my users!
  • There are too many options for my users.
  • This just doesn’t really fit the UX I’m going for...

Man stroking beard and shaking his head as if to say

But the good news is...

TinyMCE is built to be flexible and to fit all kinds of use cases. Yes, we provide a default set of toolbar options to get you started, but you can configure it to suit just about any UX.

In this article, we’re going to cover a few of the most common customizations. For more advanced topics, look at the toolbar sections in the documentation under user interface options. Also check out the related blog post on configuring our range of premium skins.

Let’s get started.

Play along

Try these configurations by modifying the init script in your own instance of TinyMCE or by using a TinyMCE Fiddle.

For example, open a TinyMCE Fiddle and paste in the following code:

<script type="text/javascript">
tinymce.init({
    selector: "textarea"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

When you click Run, you’ll get an instance of TinyMCE with the default config.

TinyMCE running with the default config.

Remove the TinyMCE menu bar

TinyMCE running with the default config, menu bar removed.

One of the most commonly asked questions we get from developers who have started using TinyMCE for the first time is how do I remove the menu bar? I guess, if it’s that common, we might consider removing it from the default setup, but we like you to know it’s there if you need it.

To remove the TinyMCE menu bar, add menubar: false to the init script:

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    menubar: false
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

If you’re playing along in the TinyMCE Fiddle, don’t forget to click Run.

Of course, in the case that you want to take full advantage of the menu bar, check out the related documentation on the menu bar and how to configure it.

🔥 6 Tiny toolbar tips 🔥

Tip 1. Override the default toolbar by adding toolbar to the init script and specifying the options you want.

Tip 2. For a complete list of valid toolbar options see our documentation about toolbar controls.

Tip 3. This toolbar config is equivalent to what you get with the default settings:

toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'

Tip 4. Pipes '|' add a separator between related options on the toolbar.

Tip 5. Some toolbar options depend on particular plugins. In that case, you’ll need to load the plugin too. Corresponding plugins are indicated in this table of toolbar controls (where “core” means it’s part of the core functionality, so you don’t need to load it).

Tip 6. Much like the menu bar, you can also remove the toolbar if needed with toolbar: false.

Let’s work through some examples!

Configure TinyMCE with fewer options

TinyMCE configured with only a few toolbar options.

If you only need a few basic formatting options, say, for a chat client or comments field, you could configure the toolbar as follows, for example:

<script type="text/javascript">

tinymce.init({
    selector: "textarea",
    menubar: false,
    toolbar: "bold italic underline"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

Configure TinyMCE with more options

TinyMCE configured with additional toolbar options.

Now we’ll extend the default config with an option forecolor to change the text color, options link and image to insert links and images, plus an option code to open the source code view.

In this case, the links, image, and code options depend on the corresponding plugins, so we’ll load them as well.

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    menubar: false,
    plugins: "link image code",
    toolbar: 'undo redo | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image | code'
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

Check out the full-featured demos in our documentation for more examples. You can click on the JS tab on each to see how they’re configured.

Also, see our full range of core and premium plugins.

TinyMCE full-featured demo with toolbar drawer expanded.

Configure the TinyMCE toolbar at the bottom

TinyMCE configured with the toolbar on the bottom.

Move the toolbar to the bottom of the frame by adding toolbar_location: bottom. Personally, when the toolbar is on the bottom, I think it looks better with the outside skin applied. So I’ve included that in this example too.

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    menubar: false,
    plugins: "link image code",
    toolbar: 'undo redo | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image | code',
    toolbar_location: 'bottom',
    skin: 'outside'
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

Remove clutter with toolbar groups

TinyMCE configured with the toolbar on the bottom and with options grouped.

Instead of cluttering your toolbar with loads of options, you can configure one or more buttons to open up a set of related options.

In this example, we’ve declared three toolbar groups - formatgroup, paragraphgroup, and insertgroup. Each one is assigned an icon, a tooltip, and a set of items. These items are the options to be presented when the toolbar group is selected. You’ll notice they are configured in much the same way as the toolbar. Once defined, these toolbar groups can be added to the toolbar config. Here’s a full list of icon identifiers you’ll probably find useful.

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: "emoticons hr image link lists charmap table", 
    toolbar: "formatgroup paragraphgroup insertgroup",
    toolbar_groups: {
        formatgroup: {
            icon: 'format',
            tooltip: 'Formatting',
            items: 'bold italic underline strikethrough | forecolor backcolor | superscript subscript | removeformat'
        },
        paragraphgroup: {
            icon: 'paragraph',
            tooltip: 'Paragraph format',
            items: 'h1 h2 h3 | bullist numlist | alignleft aligncenter alignright | indent outdent'
        },
        insertgroup: {
            icon: 'plus',
            tooltip: 'Insert',
            items: 'link image emoticons charmap hr'
        }
    },
    skin: 'outside',
    toolbar_location: 'bottom',
    menubar: false
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

More toolbar configuration options

You might also like to know how to configure: 

Also, see how to configure TinyMCE for mobile.

Again, for more advanced topics, look at the toolbar sections in the documentation under user interface options.

What's next?

Check out our related article on how to configure TinyMCE skins and icons.

TinyMCE with naked skin, thin icons, and toolbar options grouped on the bottom.

Don’t yet have a cloud subscription? Get a free API Key. (You’ll even get a free trial of our premium plugins!)

TinyMCEConfiguration
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Group of categories and tags made from the section titles within the related article.
    Tips & How-Tos

    16 features to include on your blog feed

    by Ben Long in Tips & How-Tos
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor