Skip to content

Examples

Toolbar Customization

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.

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>