Skip to content
Star
.github-star { padding-left: 15px; margin-bottom: 15px; }

Toolbar

Show Selection Details

Try it yourself:

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>
  new FroalaEditor('div#froala-editor', {
    toolbarButtons: ['fontFamily', '|', 'fontSize', '|', 'paragraphFormat', '|', 'bold', 'italic', 'underline', 'undo', 'redo', 'codeView'],
    fontFamilySelection: true,
    fontSizeSelection: true,
    paragraphFormatSelection: true
  })
</script>
File: 1644