Toolbar

Toolbar Buttons (Example 1)

Try it yourself:

The toolbar's buttons can be customized based on the screen size using the following options:

• toolbarButtons for large devices (≥ 1200px)
• toolbarButtonsMD for medium devices (≥ 992px)
• toolbarButtonsSM for small devices (≥ 768px)
• toolbarButtonsXS for extra small devices (< 768px)

Buttons can be grouped together by putting them in arays.

Copy

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

Edit in JSFiddle

HTML

Copy

<div id="froala-editor">
  <p>You have full control over the rich text editor's toolbar functionality. Simply customize what buttons are available, their order in the toolbar and also group them the way you want.</p>
</div>

JAVASCRIPT

Copy

<script>
  new FroalaEditor('div#froala-editor', {
    // Set custom buttons.
    toolbarButtons: [['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript'], ['fontFamily', 'fontSize', 'textColor', 'backgroundColor'], ['inlineClass', 'inlineStyle', 'clearFormatting']]
  })
</script>