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.
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>