Toolbar Bottom

Edit in JSFiddle

HTML

<div id="froala-editor">
  <p>This is the full featured editor with the toolbar at the bottom, using the <a href="../docs/options#toolbarBottom" title="toolbarBottom option" target="_blank">toolbarBottom</a> option.</p>
</div>

JAVASCRIPT

<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      toolbarBottom: true,
      toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html']
    })
  });
</script>