Toolbar Customization

The available buttons are: 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'color', 'formatBlock', 'blockStyle', 'inlineStyle', 'align', 'insertOrderedList', 'insertUnorderedList', 'outdent', 'indent', 'selectAll', 'createLink', 'insertImage', 'insertVideo', 'table', 'undo', 'redo', 'html', 'save', 'insertHorizontalRule', 'uploadFile', 'removeFormat', 'fullscreen'.

Buttons can be grouped together by adding separators between them. In inline mode, the separator is a horizontal line and in basic mode, the separator is a vertical one. The separator is added to the WYSIWYG HTML editor by passing it to the array from buttons option.

HTML

<div id="eg-custom-toolbar" class="text-small">
          <p>You have full control over the rich text editor's toolbar functionality. Simply customize what buttons are available, their order in the toolbar and also group them the way you want.</p>
        </div>

JAVASCRIPT

<script>
  $(function() {
    $('div#eg-custom-toolbar').editable({
      inlineMode: false,

      // Set custom buttons with separator between them.
      buttons: ['undo', 'redo' , 'sep', 'bold', 'italic', 'underline']
    })
  });
</script>