Unlock the Power of Customizable Toolbars with Froala

Posted on July 26, 2024
By Mostafa Yousef
In Editor, Tutorials

As a content creator, you know that a rich text editor is only as powerful as its customization capabilities. That’s why Froala stands out – it offers a flexible, modular architecture that lets you tailor the editor’s functionality and design to fit your unique needs.

The toolbar is a prime example. With Froala, you can position it at the top or bottom, and display it in a classic view or an inline layout. But the magic happens when you optimize the toolbar for different screen sizes, creating a truly responsive editing experience.

In this guide, we’ll dive deep into Froala’s robust toolbar customization options. You’ll learn how to override the default toolbar, create custom configurations based on device width, and even control the toolbar’s position, direction, and z-index. By the end, you’ll have the skills to craft a rich text editor that seamlessly integrates with your application’s design and workflow.

So if you’re ready to take your content creation tools to the next level, let’s get started unlocking the full potential of Froala’s customizable toolbar.

Let’s start with the following basic HTML template, including Froala’s core stylesheet and JavaScript files.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css' rel='stylesheet' type='text/css' />


<style>

            .container{
                margin: 5% auto;
                width: 80%;
                display: block;
            }


        </style>
    </head>

    <body>
        <div class="container">
            <textarea id="editor">
                <h1>Let's build something beautiful</h1>
                <p>You can customize the Froala toolbar according to your use case. </p>
            </textarea>
        </div>

        <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js'></script>

    </body>

</html>

Now, let’s initialize Froala using the default settings.

      <script> 

            var editor = new FroalaEditor('#editor');

        </script>

The Froala’s default toolbar has the following basic format options:

Formatting with Bold, Italic, Underline, Strikethrough, Subscript, and Superscript.
Clear formatting.
Increase and decrease indent.
Insert Horizontal Line.
History with Undo and Redo.
Select All.

Froala’s modular architecture is based on plugins. If a plugin is not included or deactivated, its toolbar buttons will not be displayed.

By replacing the Froala stylesheet and JavaScript files in the above code with the packaged version, the toolbar will display all the default plugins’ toolbar buttons.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkg.min.css' rel='stylesheet' type='text/css' />


<style>

            .container{
                margin: 5% auto;
                width: 80%;
                display: block;
            }


        </style>
    </head>

    <body>
        <div class="container">
            <textarea id="editor">
                <h1>Let's build something beautiful</h1>
                <p>You can customize the Froala toolbar according to your use case. </p>
            </textarea>
        </div>

        <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>

    </body>

</html>
<script> 
    var editor = new FroalaEditor('#editor');
</script>

If you do not use all these features, you can include the stylesheets and JavaScript files of the plugins you want to use only. This way you can optimize your application performance. Here is a complete list of Froala’s plugins.

There may be situations where you include a plugin file but don’t need to display its toolbar buttons, or you may want to display the buttons of a custom plugin. In either case, to override the default toolbar, you can use the toolbarButtons option. This option allows you to specify the buttons you want to display in the toolbar. By default, this option is set to

{

  'moreText': {

    'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']

  },

  'moreParagraph': {

    'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']

  },

  'moreRich': {

    'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']

  },

  'moreMisc': {

    'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],

    'align': 'right',

    'buttonsVisible': 2

  }

}

As you can see, by default, it is an object that has four sub-objects, each representing a toolbar section.

moreText
moreParagraph
moreRich
moreMisc

Each of these four objects can have the following properties:

buttons: is an array that contains the buttons to be displayed in that section.
align: is a string that determines the position of a section on the toolbar. It can have a value of either “right” or “left”. If not specified, the default value is “left”.
buttonsVisible: is an integer that represents the number of buttons directly visible on the toolbar. Any additional buttons are hidden behind a “Display More” option.

If you prefer the classic toolbar where all buttons are visible, you can assign an array to the toolbarButtons option instead of an object. To separate buttons into groups, add each group in a separate array within the main array.

    var editor = new FroalaEditor('#editor',{
        toolbarButtons: [
            ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],

            ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],

            ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],

            ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
        ]
    });

In arrays, you can use the pipe character ‘|’ to add a vertical separator between options on the toolbar.

    var editor = new FroalaEditor('#editor',{
        toolbarButtons: [
            ['insertLink', 'insertImage', 'insertVideo', '|', 'insertTable', 'emoticons', 'fontAwesome'],

            ['bold', 'italic', 'underline', '|', 'strikeThrough', 'subscript', 'superscript',  'fontFamily', 'fontSize', 'textColor', 'backgroundColor', '|', 'inlineClass', 'inlineStyle', 'clearFormatting'],

        ]

    });

Use hyphens ‘-’ to add a horizontal separator between options on the toolbar.

   var editor = new FroalaEditor('#editor',{
        toolbarButtons: [
            ['insertLink', 'insertImage', 'insertVideo', '-', 'insertTable', 'emoticons', 'fontAwesome'],

            ['bold', 'italic', 'underline', '|', 'strikeThrough', 'subscript', 'superscript', '-', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', '|', 'inlineClass', 'inlineStyle', 'clearFormatting'],

        ]

    });

If you have only one group of buttons, you can put them in a single array instead of the nested array.

    var editor = new FroalaEditor('#editor',{
        toolbarButtons: ['bold', 'italic', 'underline', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'undo', 'redo', 'fullscreen', 'print', 'getPDF', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome'],
        
    });

In this case, adding pipes ‘|’, will insert a white space between options.

   var editor = new FroalaEditor('#editor',{
        toolbarButtons: ['bold', 'italic', 'underline', '|', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', '|', 'undo', 'redo', 'fullscreen', 'print', 'getPDF', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome'],
        
    });

There are many ways to design your toolbar by just playing with the toolbarButtons option. This makes Froala Editor provide a highly customizable toolbar that allows you to tailor the available options to your specific needs. You can choose to display all buttons at once or group them into sections that can be expanded or collapsed. The toolbar can be aligned to the left or right, and you can control the number of directly visible buttons. This flexibility enables you to create a user interface that is both intuitive and efficient for your application.

Froala provides several options to customize the toolbar buttons based on the screen or editor width. This allows you to optimize the user experience by showing the most relevant toolbar options for different device sizes.

The available options are:

toolbarButtonsMD: This option sets the list of buttons that appear in the rich text editor’s toolbar when the screen or editor width is larger than 992px and less than 1200px. If you don’t set this option, the toolbarButtons value will be used.
toolbarButtonsSM: This option sets the list of buttons that appear in the rich text editor’s toolbar when the screen or editor width is larger than 768px and less than 992px. If you don’t set this option, the toolbarButtonsMD value will be used.
toolbarButtonsXS: This option sets the list of buttons that appear in the rich text editor’s toolbar when the screen or editor width is less than 768px. If you don’t set this option, the toolbarButtonsSM value will be used.

By default, these options are responsive to the screen width. However, you can change this behavior to make the toolbar responsive to the editor width instead. To do this, set the toolbarResponsiveToEditor option to true. This can be useful if you want the toolbar to adapt to the size of the editor, rather than the overall browser window.

These options empower you with many benefits, such as:

Optimized User Experience: By showing the most relevant toolbar options for different device sizes, you can provide a more intuitive and efficient editing experience for your users.
Improved Performance: Reducing the number of toolbar buttons displayed on smaller screens can improve the overall performance and responsiveness of the Froala editor.
Flexibility: The ability to customize the toolbar based on screen or editor width gives you greater control over the user interface, allowing you to tailor the editor to the specific needs of your application.

Here’s an example of how you can use these options to customize the toolbar:

var editor = new FroalaEditor('#editor', {
    toolbarResponsiveToEditor: true,
    toolbarButtonsMD: ['bold', 'italic', 'underline', 'align', 'formatOL', 'formatUL', 'insertLink', 'insertImage'],
    toolbarButtonsSM: ['bold', 'italic', 'underline', 'align'],
    toolbarButtonsXS: ['bold', 'italic', 'underline']
    });

In this example, the toolbar will display a larger set of buttons on medium and larger devices, a reduced set of buttons on small devices, and an even more minimal set of buttons on extra small devices. By making the toolbar responsive to the editor’s width, the layout and button visibility will adapt to the available space within the editor, providing an optimal user experience across different screen sizes.

When using Froala Editor with a right-to-left (RTL) language, you may want your editor toolbar buttons to start from the right. Froala provides the direction option to achieve this. By setting direction: 'rtl', the toolbar buttons will be displayed in the correct order and position for the RTL interface, providing a more natural and intuitive editing experience.

    var editor = new FroalaEditor('#editor', {
        toolbarButtons: ['bold', 'italic', 'underline', '|', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', '|', 'undo', 'redo', 'fullscreen', 'print', 'getPDF', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome'],
        direction: 'rtl'    
    });

You can also hide the tooltips that are shown when getting with the mouse over the buttons from the toolbar. To do this, set the tooltips option to false. However, we recommend keeping it enabled as tooltips can be helpful for users to understand the functionality of each toolbar button.

var editor = new FroalaEditor('#editor', {

 tooltips: false

});

While you can configure the toolbar with more buttons or fewer buttons, another customization option is changing the toolbar position around the editor.

In some use cases, for example in chat applications or mobile-focused interfaces, it may be more desirable to position the toolbar at the bottom of the editor. This can be achieved by setting the toolbarBottom: true. This configuration will display the toolbar at the bottom of the editor, providing a more natural and intuitive layout for certain use cases.

Another toolbar position option is the “sticky” toolbar, which keeps the toolbar visible at the top or bottom of the screen as the user scrolls through the content. This can be enabled by setting the toolbarSticky option to true. This ensures that the toolbar remains accessible and in view, even as the user scrolls, providing a more seamless editing experience. The sticky toolbar can be particularly useful when the editor is embedded within a larger page layout.

In this case, you can benefit from the toolbarStickyOffset option, which allows you to specify the vertical space in pixels from the top or bottom of the editor where the sticky toolbar should be fixed. This can be useful if you have other elements at the top of the page that you want the toolbar to remain below. By customizing the toolbar position, you can create a more intuitive and user-friendly interface that aligns with the specific needs of your application and its users.

var editor = new FroalaEditor('#editor', {

    toolbarButtons: ['bold', 'italic', 'underline', '|', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', '|', 'undo', 'redo', 'fullscreen', 'print', 'getPDF', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome'],

    toolbarBottom: true,

    toolbarSticky: false,

    toolbarStickyOffset: 100,

    height: 1200

    });

Alternatively, you can choose to display the toolbar in line with the editor content, rather than in a separate bar. This can be achieved by setting the toolbarInline option to true. You can learn more about how to use the inline mode in this guide.

Another useful toolbar feature is the ability to display the font size, family, and paragraph format information of the user’s current selection on the toolbar. This can be enabled by setting the fontFamilySelection, fontSizeSelection, and paragraphFormatSelection options to true. This provides users with immediate feedback on the formatting of their selection, allowing them to quickly identify and adjust the font, size, or paragraph style as needed. By surfacing this information directly on the toolbar, the editing experience becomes more intuitive and efficient. These toolbar customization options give you the flexibility to tailor the Froala editor’s user interface to best suit the needs of your specific application and its users, enhancing the overall content creation and editing workflow.

var editor = new FroalaEditor('#editor', {

    toolbarButtons: ['bold', 'italic', 'underline', '|', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', '|', 'undo', 'redo', 'fullscreen', 'print', 'getPDF', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome'],

    toolbarBottom: true,

    toolbarSticky: false,

    toolbarStickyOffset: 100,

    height: 1200,

    fontFamilySelection: true,

    fontSizeSelection: true,

    paragraphFormatSelection: true

});

See an example of show selection details in the Froala toolbar.

Froala Editor allows you to control multiple editors on the same page using a shared toolbar. This can be useful when you have multiple rich text editors on a single page and want to provide a consistent user experience.

To achieve this, you can use the toolbarContainer option. This option allows you to specify a CSS selector for an external container where the toolbar will be placed. All the editors on the page will then share this common toolbar.

Here’s an example:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />


<style>

            .container{
                margin: 5% auto;
                width: 80%;
                display: block;
            }


        </style>
    </head>

    <body>
        <div class="container">
            <div id="toolbarContainer"></div>
            <p>Some dummy content.</p>
            <p>Some dummy content.</p>

            <h2>Editor 1</h2>

            <textarea id="editor1">
                <h1>Let's build something beautiful</h1>
                <p>You can customize the Froala toolbar according to your use case. </p>
            </textarea>
            <p>Some dummy content.</p>

            <h2>Editor 2</h2>
            <textarea id="editor2">
                <p>This editor toolbar is in another Div.</p>
            </textarea>
        </div>

        <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>


        <script> 
            var editor1 = new FroalaEditor('#editor1', {
                toolbarButtons: ['bold', 'italic', 'underline', '|', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', '|', 'undo', 'redo', 'fullscreen', 'print', 'getPDF', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome'],
                toolbarContainer: '#toolbarContainer'
            });
        
            var editor2 = new FroalaEditor('#editor2', {
                toolbarButtons: ['bold', 'italic', 'underline', '|', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', '|', 'undo', 'redo', 'fullscreen', 'print', 'getPDF', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome'],
        
                toolbarContainer: '#toolbarContainer'
            });
        </script>
    </body>

</html>

In the above code, we have a shared toolbar container with the ID `#toolbarContainer`. Both editors, `editor1` and `editor2`, are configured to use this shared toolbar container by setting the toolbarContainer option and configuring the toolbarButtons to have the same buttons in both editors. This allows the toolbar to be displayed in a single location, providing a consistent user interface across multiple editors on the same page.

If the toolbarButtons option has different settings for each editor, it will result in two separate toolbars – one for each editor.

By sharing the toolbar, any insertion made in the editor (e.g., inserting an image) will be reflected in the active editor.

If the toolbar is not appearing, the problem is most likely in the configuration of the toolbar option. However, sometimes the problem is the toolbar is hidden under other page elements. In this case, you can use the Froala zIndex option to fix this. This option sets the zIndex on the editor toolbars and popups.

For example, if the toolbar is hidden behind a fixed header, you can set the z-index option to a higher value to ensure the toolbar is displayed on top. This can be done by setting the zIndex option when initializing the Froala Editor:

var editor = new FroalaEditor('#editor', {

  zIndex: 2000 // Set a higher z-index value

});

Adjusting the z-index can help resolve issues where the toolbar is obscured by other page elements, ensuring the editor’s functionality remains accessible and intuitive for users.

Froala’s flexible and customizable toolbar provides a powerful way to tailor the rich text editor to your specific needs. You can optimize the toolbar layout for different screen sizes and editor widths. You also have the ability to control the toolbar position. This ensures an intuitive and efficient editing experience across devices.

Additional customization options, such as setting the toolbar direction and displaying selection details, give you even greater flexibility to create a polished, user-friendly interface.

By taking advantage of Froala’s robust toolbar customization capabilities, you can craft a rich text editing experience that seamlessly integrates with your application’s design and functionality. Unlock the full potential of Froala and create content management solutions that delight your users.

Ready to build your custom Froala toolbar? Get started today and elevate your content creation workflows!

Our Top Picks:

Explore Froala Editor

Free trial download!

Buy Froala Editor

Questions? Speak to Us

Posted on July 26, 2024

Mostafa Yousef

Senior web developer with a profound knowledge of the Javascript and PHP ecosystem. Familiar with several JS tools, frameworks, and libraries. Experienced in developing interactive websites and applications.

Visit Profile

No comment yet, add your voice below!

Unlock the Power of Customizable Toolbars with Froala

Our Top Picks:

Mostafa Yousef

Add a Comment Cancel reply

Articles related to this post

Customizing Filestack File Picker: the New Froala File Uploading Option – Part 2

Froala Editor 4.3.1: Transforming Your Content Creation Experience with Refined Pasting and More

Customizing Filestack File Picker: the New Froala File Uploading Option – Part 1

The Froala Default Toolbar

Customizing the Froala Toolbar

Overriding The Default Toolbar

Custom Froala Toolbar Based on The Screen or Editor Width

Toolbar For RTL Language

Hide Toolbar Tooltips

Control Froala Toolbar Position

Bottom Toolbar

Sticky toolbar

Inline Toolbar

Show information About Your Selection on The Toolbar

Control Multiple Editors From a Shared Toolbar

The Froala Toolbar Is Not Showing

Unleash the Power of Froala’s Customizable Toolbar

Our Top Picks:

Mostafa Yousef

Add a Comment Cancel reply

Articles related to this post

Customizing Filestack File Picker: the New Froala File Uploading Option – Part 2

Froala Editor 4.3.1: Transforming Your Content Creation Experience with Refined Pasting and More

Customizing Filestack File Picker: the New Froala File Uploading Option – Part 1