Toolbar

Show Selection Details

Using the fontFamilySelection, fontSizeSelection and paragraphFormatSelection options you can immediately view the selected font family, font size and paragraph format in the WYSIWYG HTML editor's toolbar.


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>