Toolbar

Show Selection Details

Edit in JSFiddle

HTML

<div id="froala-editor">
  <p>Using the <a href="../docs/options#fontFamilySelection" title="fontFamilySelection option" target="_blank">fontFamilySelection</a>, <a href="../docs/options#fontSizeSelection" title="fontSizeSelection option" target="_blank">fontSizeSelection</a> and <a href="../docs/options#paragraphFormatSelection" title="paragraphFormatSelection option" target="_blank">paragraphFormatSelection</a> options you can immediately view the selected font family, font size and paragraph format in the WYSIWYG HTML editor's toolbar.</p>
</div>

JAVASCRIPT

<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      toolbarButtons: ['fontFamily', '|', 'fontSize', '|', 'paragraphFormat', '|', 'bold', 'italic', 'underline', 'undo', 'redo', 'codeView'],
      fontFamilySelection: true,
      fontSizeSelection: true,
      paragraphFormatSelection: true
    })
  });
</script>