Example layouts

This document covers example implementations showcasing various toolbars resembling well-known products used by millions of users around the world. The JavaScript code listed next to the example preview can be copied and pasted into the standard APEX page item attribute Initialization JavaScript Code.

Document ready

The example presents the editor’s toolbar configured to resemble the Google Documents toolbar. The toolbar is using two groups paragraph and misc positioning buttons to the left and right side of the toolbar. To give the editor document’s editor look, the option documentReady is enabled.

Features:

• The Google Documents toolbar looks
• the number of visible buttons changes while a browser is resized
• the exposed buttons change, for example, undo and redo buttons are not visible for smaller widths
• when the browser width is below 768px the toolbar buttons are re-organized into two rows of toolbar

function( pOptions ) {
  pOptions.documentReady = true;

  // browser width > 1200px
  pOptions.toolbarButtons   = {
    "moreParagraph": {
      "buttons": [ 'undo', 'redo', 'print', 'paragraphFormat', 'fontFamily', 'fontSize', 'bold', 'italic', 'underline', 'textColor', 'backgroundColor', 'insertLink', 'insertImage', 'align', 'lineHeight', 'formatUL', 'formatOL', 'clearFormatting', 'outdent', 'indent'],
      "align": "left",
      "buttonsVisible": 20
    },
    "moreMisc": {
      "buttons": ["fullscreen", "selectAll", "help", "html", "getPDF"],
      "align": "right",
      "buttonsVisible": 1
    }
  };

  // 922px <= browser width < 1200px
  pOptions.toolbarButtonsMD = $.extend(true, {}, pOptions.toolbarButtons);
  pOptions.toolbarButtonsMD.moreParagraph.buttonsVisible = 13;
  pOptions.toolbarButtonsMD.moreMisc.buttonsVisible = 1;

  // 768px <= browser width < 992px
  pOptions.toolbarButtonsSM   = {
    "moreParagraph": {
      "buttons": [ 'paragraphFormat', 'fontFamily', 'fontSize', 'bold', 'italic', 'textColor', 'insertLink', 'insertImage', 'undo', 'redo', 'print', 'underline', 'backgroundColor', 'align', 'lineHeight', 'formatUL', 'formatOL', 'clearFormatting', 'outdent', 'indent'],
      "align": "left",
      "buttonsVisible": 8
    },
    "moreMisc": {
      "buttons": ["fullscreen", "selectAll", "help", "html", "getPDF"],
      "align": "right",
      "buttonsVisible": 1
    }
  };

  // browser width < 768px
  pOptions.toolbarButtonsXS = {
    "moreParagraph": {
      "buttons": [ 'paragraphFormat', 'fontFamily', 'fontSize',  'align', 'lineHeight', 'outdent', 'indent'],
      "align": "left",
      "buttonsVisible": 7
    },
    "moreText": {
      "buttons": [ 'insertLink', 'insertImage', 'bold', 'italic', 'underline', 'textColor', 'backgroundColor', 'formatUL', 'formatOL', 'clearFormatting' ],
      "align": "left",
      "buttonsVisible": 10
    },
    "moreMisc": {
      "buttons": ['undo', 'redo', "fullscreen", "print", "selectAll", "help", "html", "getPDF"],
      "align": "right",
      "buttonsVisible": 0
    }
  }

  return pOptions;
}

Calendar

The example presents the editor’s toolbar configured to resemble the Google Calendar toolbar. The toolbar definition is a simple array of 7 buttons and two separators.

Features:

• The Google Calendar toolbar looks
• Simple to implement

function( pOptions ) {
  pOptions.toolbarButtons = ['bold', 'italic', 'underline', '|', 'formatUL', 'formatOL', '|', 'insertLink', 'clearFormatting'];
  return pOptions;
}

Inline toolbar

The example presents editor’s toolbar configured using toolbarInline and toolbarVisibleWithoutSelection to be shown only when the text in a document is selected or when the end-user presses keyboard shortcut CTRL+E.

Features:

• Toolbar for visible for selected text only
• Shortcut to open toolbar on demand
• Intuitive UX when editing CLOB values embedded directly in the APEX application

Note

Using option toolbarInline makes the editor borderless and background-color less, which requires additional CSS configuration to make the editor present well in the Oracle APEX application. The example implementation relies on the native Oracle APEX region template content block. See the tab Content Block Options below.

function( pOptions ) {
  pOptions.toolbarVisibleWithoutSelection = false;
  pOptions.toolbarInline = true;
  pOptions.toolbarButtons = [
    'paragraphFormat', 'fontFamily', 'fontSize', 'indent', 'outdent', 'formatUL', 'formatOL', '|',
    'insertImage', 'insertLink', '|',
    'bold', 'italic', 'underline', 'clearFormatting'
  ];
  return pOptions;
}

E-mail

The example presents the editor’s toolbar configured to resemble the Google Gmail toolbar available when composing a new e-mail. The toolbar is displayed below the editor using option toolbarBottom.

Features:

• The toolbar is positioned at the bottom
• The Google Gmail toolbar looks
• Responsive toolbar

function( pOptions ) {
  pOptions.toolbarBottom = true;

  // browser width > 1200px
  pOptions.toolbarButtons   = {
    "moreParagraph": {
      "buttons": [ "undo", "redo", "fontFamily", "paragraphFormat", "bold", "italic", "underline", "textColor", "backgroundColor", "alignLeft", "alignCenter", "formatOL", "formatUL", "outdent", "indent", "quote", "strikeThrough", "clearFormatting"  ],
      "align": "left",
      "buttonsVisible": 18
    },
    "moreMisc": {
      "buttons": ["insertImage", "insertLink", "fullscreen"],
      "align": "right",
      "buttonsVisible": 3
    }
  };

  // 922px <= browser width < 1200px
  pOptions.toolbarButtonsMD = $.extend(true, {}, pOptions.toolbarButtons);
  pOptions.toolbarButtonsMD.moreParagraph.buttonsVisible = 13;


  // 768px <= browser width < 992px
  pOptions.toolbarButtonsSM = $.extend(true, {}, pOptions.toolbarButtons);
  pOptions.toolbarButtonsSM.moreParagraph.buttonsVisible = 9;
  pOptions.toolbarButtonsSM.moreMisc.buttonsVisible = 1;

  // browser width < 768px
  pOptions.toolbarButtonsXS = $.extend(true, {}, pOptions.toolbarButtons);
  pOptions.toolbarButtonsXS.moreParagraph.buttonsVisible = 7;
  pOptions.toolbarButtonsXS.moreMisc.buttonsVisible = 1;

  return pOptions;
}