Skip to main content

Define with JavaScript

Options listed below can be set using the plug-in page item attribute Initialization JavaScript Code, or using supporting dynamic action plug-in Initialization JavaScript Code.

Initialization JavaScript Code
function( pOptions ){
  pOptions.optionName = optionValue;
  return pOptions;
}

Tooblar buttons​

The table below presents list of button ids available to configure the plug-in custom toolbar.

Button IDDescription
fullscreenOpens editor's fullscreen view.
getPDFConverts HTML document into PDF file.
helpOpens popup with shortcuts definable using option helpSets.
htmlPreviews a document's HTML.
printOpens a current document in a browser print window.
redoRedo most recent change in a document.
selectAllSelects all document contents.
undoUndo most recent change in a document.

Toolbar definition​

Editor's custom toolbar can be defined using JSON object describing toolbar groups or an Array of buttons.

The JSON allows defining four (optional) groups paragraph, text, rich and misc with possibility to align a group to left or right, and display specified number of buttons (hidden buttons can be expanded).

On the other hand, the array implementation is simple array of button ids, and renders buttons from let to right (or right to left when RTL is enabled).

responsive toolbar

Using options toolbarButtons, toolbarButtonsMD, toolbarButtonsSM, and toolbarButtonsXS, a developer can specify different toolbar configurations dependent on a browser width.

JSON​

The toolbar JSON object must implement properties described in the table below to specify what toolbar groups are available.

PropertyTypeDescription
moreParagraphJSONObject describes group paragraph.
moreTextJSONObject describes group text.
moreRichJSONObject describes group rich.
moreMiscJSONObject describes group misc.

Each group must implement properties described in the table below defining what buttons are assigned to specific group, how group is aligned, and how many buttons is visible - buttons exceeding a given number are hidden in expandable toolbar.

PropertyTypeDescription
buttonsArrayArray of button ids to be rendered in the group.
alignStringThe aligment of the group, valid valuses are left and right.
buttonsVisibleNumberThe number of buttons to be visible without expanding the group.
Group usage

The toolbar doesn't have to implement all four groups. For example, buttons can be displayed in two groups aligned left and right.

The JavaScript below presents the plug-in default configuration for responsive toolbar. Options toolbarButtonsMD, toolbarButtonsSM and toolbarButtonsXS inherits the toolbar definition specified for option toolbarButtons. Lastly number of visible buttons is adjusted depending for a current browser width.

Initialization JavaScript Code
function( pOptions ){
  pOptions.toolbarButtonsMD = $.extend(true, {}, pOptions.toolbarButtons);
  pOptions.toolbarButtonsSM = $.extend(true, {}, pOptions.toolbarButtons);
  pOptions.toolbarButtonsXS = $.extend(true, {}, pOptions.toolbarButtons);

  pOptions.toolbarButtonsMD.moreParagraph.buttonsVisible = 3;
  pOptions.toolbarButtonsMD.moreText.buttonsVisible = 4;
  pOptions.toolbarButtonsMD.moreRich.buttonsVisible = 2;
  pOptions.toolbarButtonsMD.moreMisc.buttonsVisible = 1;
    
  pOptions.toolbarButtonsSM.moreParagraph.buttonsVisible = 2;
  pOptions.toolbarButtonsSM.moreText.buttonsVisible = 2;
  pOptions.toolbarButtonsSM.moreRich.buttonsVisible = 2;
  pOptions.toolbarButtonsSM.moreMisc.buttonsVisible = 1;

  pOptions.toolbarButtonsXS.moreParagraph.buttonsVisible = 1;
  pOptions.toolbarButtonsXS.moreText.buttonsVisible = 2;
  pOptions.toolbarButtonsXS.moreRich.buttonsVisible = 2;
  pOptions.toolbarButtonsXS.moreMisc.buttonsVisible = 0;

  for ( var toolbar of ["toolbarButtonsXS", "toolbarButtonsSM"]) {
    for ( var group of [ "moreParagraph", "moreText", "moreRich", "moreMisc"] ) {
      do {
        pOptions[toolbar][group].buttons.splice( pOptions[toolbar][group].buttons.indexOf('|'), 1 );
      } while( pOptions[toolbar][group].buttons.indexOf('|') > -1 )    
  
    }
  }

  return pOptions;
}
Hint on responsive toolbar group buttons

Not only a number of visible buttons can be adjusted for different browser widths. If needed, the group buttons can be re-assigned to show only crucial buttons and hide less important in expandable hidden toolbar. To implement such behavior, the group property buttons must be redefined.

Array​

Definining toolbar buttons as simple array is simple and fast, buttons are aligned to left or right depending on RTL support. Definining

Static​

When the plug-in is not configured to use responsive toolbar options, and toolbar buttons don't fit in one line, then buttons are rendered one under another.

Initialization JavaScript Code
function( pOptions ) {
  pOptions.toolbarButtons = [ 'undo', 'redo', 'print', '|', 'paragraphFormat', 'fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'textColor', 'backgroundColor', '|', 'insertLink', 'insertImage', '|', 'align', 'lineHeight', 'formatUL', 'formatOL', 'outdent', 'indent', 'clearFormatting']
    
  pOptions.toolbarButtonsMD = pOptions.toolbarButtons;
  pOptions.toolbarButtonsXS = pOptions.toolbarButtons;
  pOptions.toolbarButtonsSM = pOptions.toolbarButtons;
  return pOptions;
}

Responsive​

When the plug-in is configured to use responsive toolbar options toolbarButtonsMD, toolbarButtonsSM, and toolbarButtonsXS, the toolbar buttons available to the end-user differs depending on the browser width.

The example code below removes buttons from toolbar depending on a browser current width. The JSON object named removed defines buttons to be removed depending on toolbar option named used to render the toolbar.

Initialization JavaScript Code
function( pOptions ) {
  var 
    defaultButtons  = [ 'undo', 'redo', 'print', '|', 'paragraphFormat', 'fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'textColor', 'backgroundColor', '|', 'insertLink', 'insertImage', '|', 'align', 'lineHeight', 'formatUL', 'formatOL', 'outdent', 'indent', 'clearFormatting'],
    remove = {
      // define toolbar for browser width less than 1200px and larger than 992px
      "toolbarButtonsMD": [ "redo", "print", "underline", "textColor", "backgroundColor" ],
      // define toolbar for browser width less than 992px and larger than 768px
      "toolbarButtonsSM": [ "redo", "print", "underline", "textColor", "backgroundColor", "undo", "lineHeight", "outdent", "indent"],
      // define toolbar for browser width less than 768px
      "toolbarButtonsXS": [ "redo", "print", "underline", "textColor", "backgroundColor", "undo", "lineHeight", "outdent", "indent", "fontFamily"]
    }
  ;

  // define toolbar and copy it
  pOptions.toolbarButtons   = defaultButtons;
  pOptions.toolbarButtonsMD = $.extend(true, [], defaultButtons);
  pOptions.toolbarButtonsXS = $.extend(true, [], defaultButtons);
  pOptions.toolbarButtonsSM = $.extend(true, [], defaultButtons);

  // iterate over toolbar definitions less than 1200px
  for ( var toolbar of [ "toolbarButtonsMD", "toolbarButtonsSM", "toolbarButtonsXS" ] ) {
    
    // remove button separators
    do {
      pOptions[ toolbar ].splice( pOptions[ toolbar ].indexOf("|"), 1 );
    } while ( pOptions[ toolbar ].indexOf("|") > -1 );

    // remove buttons depeding on "remove" JSON definition
    for ( var button of remove[toolbar] ) {
      pOptions[toolbar].splice( pOptions[toolbar].indexOf(button), 1 );
    }
  }

 
  return pOptions;
}

Responsive toolbar​

toolbarButtons​

The value must be JSON object describing toolbar groups, or an array of buttons. The option specifies toolbar for normal screen devices (browser width is larger or equal 1200px).

The plug-in default value for toolbarButtons is computed using toolbar preset selected in the plug-in page item attribute Toolbar. The code below represents toolbar preset Full as anonymouse JavaScript function. The function can be used in the plug-in page item attribute Initialization JavaScript Code.

Initialization JavaScript Code
function( pOptions ){
  var 
    text      = ['bold', 'strikeThrough', 'clearFormatting', '|', 'textColor', '|', 'backgroundColor', 'underline', 'italic', 'superscript', 'subscript', 'inlineClass', 'inlineStyle'],
    paragraph = ['paragraphFormat', 'fontFamily', 'fontSize', '|', 'formatOL', 'formatUL', '|', 'align', 'lineHeight', 'indent', 'outdent', 'quote'],
    rich      = ['insertLink', '|', 'insertImage', 'insertTable', 'insertHR', 'specialCharacters', 'fontAwesome', 'emoticons', 'insertVideo'],
    misc      = ['undo', '|', 'fullscreen', 'redo', 'print', 'getPDF', 'selectAll', 'html', 'help']
  ;

  pOptions.toolbarButtons = {
    'moreParagraph': { 'buttons': paragraph, 'align': 'left' , 'buttonsVisible': 6 },
    'moreText'     : { 'buttons': text     , 'align': 'left' , 'buttonsVisible': 4 },
    'moreRich'     : { 'buttons': rich     , 'align': 'left' , 'buttonsVisible': 2 },
    'moreMisc'     : { 'buttons': misc     , 'align': 'right', 'buttonsVisible': 2 }
  };

  return pOptions;
}

toolbarButtonsMD​

The value must be JSON object describing toolbar groups, or an array of buttons. The options specifies toolbar for for medium screen devices (browser width is larger or equal 922px but less than 1200px).

The plug-in default value for toolbarButtonsMD is computed based on option toolbarButtons. The code below represents toolbar preset Full as anonymouse JavaScript function. The function can be used in the plug-in page item attribute Initialization JavaScript Code.

function( pOptions ){
  pOptions.toolbarButtonsMD = $.extend(true, {}, pOptions.toolbarButtons);

  pOptions.toolbarButtonsMD.moreParagraph.buttonsVisible = 3;
  pOptions.toolbarButtonsMD.moreText.buttonsVisible      = 4;
  pOptions.toolbarButtonsMD.moreRich.buttonsVisible      = 2;
  pOptions.toolbarButtonsMD.moreMisc.buttonsVisible      = 1;

  return pOptions;
}

toolbarButtonsSM​

The value must be JSON object describing toolbar groups, or an array of buttons. The options specifies toolbar for for small screen devices ( browser width is larger or equal 768px but less than 992px).

The plug-in default value for toolbarButtonsSM is computed based on option toolbarButtons. The code below represents toolbar preset Full as anonymouse JavaScript function. The function can be used in the plug-in page item attribute Initialization JavaScript Code.

function( pOptions ){
  pOptions.toolbarButtonsSM = $.extend(true, {}, pOptions.toolbarButtons);

  pOptions.toolbarButtonsSM.moreParagraph.buttonsVisible = 2;
  pOptions.toolbarButtonsSM.moreText.buttonsVisible      = 2;
  pOptions.toolbarButtonsSM.moreRich.buttonsVisible      = 2;
  pOptions.toolbarButtonsSM.moreMisc.buttonsVisible      = 1;

  return pOptions;
}

​

toolbarButtonsXS​

The value must be JSON object describing toolbar groups, or an array of buttons. The options specifies toolbar for for extra small screen devices (browser width is less than 768px).

The plug-in default value for toolbarButtonsXS is computed based on option toolbarButtons. The code below represents toolbar preset Full as anonymouse JavaScript function. The function can be used in the plug-in page item attribute Initialization JavaScript Code.

function( pOptions ){
  pOptions.toolbarButtonsSM = $.extend(true, {}, pOptions.toolbarButtons);

  pOptions.toolbarButtonsXS.moreParagraph.buttonsVisible = 1;
  pOptions.toolbarButtonsXS.moreText.buttonsVisible      = 2;
  pOptions.toolbarButtonsXS.moreRich.buttonsVisible      = 2;
  pOptions.toolbarButtonsXS.moreMisc.buttonsVisible      = 0;
    
  return pOptions;
}