Styling font sizes in TinyMCE

Overview

In TinyMCE there are a couple of ways to add font size dropdown menu.The first one is via the standard fontsizeselect toolbar button and the second one is using the style_formats configuration option.In this article we will learn how to add the font-sizes and style the font sizes text/label using style_formats for better user experience.

Font Size setting in TinyMCE

TinyMCE has a fonsizeselect toolbar option which adds a dropdown menu with font sizes in it. To add font sizes just add fontsizeselect in the toolbar settings of your configuration file as below:

toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | fontsizeselect link image "

 This option will only provide you font-size dropdown list but you cannot style the labels here.

TinyMCE gives you a style_formats configuration option which allows you to add styles.

This is how the default font-size dropdown list looks:

Styling the font size labels

To style the font size labels,TinyMCE has a style_formats ,this option allows you to add font-size and advanced style formats for text and other elements of the editor.

Below is an example of how to add style_formats in your TinyMCE init file :

style_formats: [

   {title: '12px', inline: 'span', styles: {'font-size':'12pt','font-weight':'bold'}},

   {title: '24px', inline: 'span', styles: {'font-size': '24pt',color: 'red'}},

   {title: '36px', inline: 'span', styles: {'font-size': '36pt'}}  

 ],

Adding the style_formats setting will add a formats dropdown menu to the toolbar with all the styles in it.

As seen in the above screenshot, the font size labels have the actual font sizes and some more styles like color, font-weight to it. You can remove the fontsizeselect toolbar button and add the fonts via the Formats dropdown.

You can also change the default ‘Formats’ menu text label to Font size if needed as explained in this article https://ephox.zendesk.com/entries/99120627-How-to-change-the-default-text-labels-in-Menus-Dialogs-and-the-Context-Menu

Conclusion

As explained above, in few simple steps you can easily add some style to the font-size dropdown menu using style_formats setting in TinyMCE.