Custom image context menu

The image context menu can be configured to display only specified buttons using the plug-in attribute Initialization JavaScript Code and Froala option imageEditButtons.

The plug-in default imageEditButtons

function( pOptions ) {
  pOptions.imageEditButtons = [
    'imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', '|', 
    'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 
    'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize', 'imageTUI'
  ];

  return pOptions;
}

The table below presents image context menu buttons to be used as array values for option imageEditButtons.

Button	Description
imageReplace	Displays button to replace an image
imageAlign	Displays button to align an image
imageCaption	Displays button to adding an image caption text
imageRemove	Displays button removing an image from document
imageLink	Displays button adding an image link
linkOpen	Displays button opening image link when image link is defined
linkEdit	Displays button opening popup updating an image link when image link is defined
linkRemove	Displays button removing image link when image link is defined
imageDisplay	Displays button chaning image display mode (inline or break text)
imageStyle	Displays button with availabe image styles
imageAlt	Displays button defining alternative text for an image when image can't be loaded
imageSize	Displays button to set fixed size of an image
imageTUI	Displays button opening In-document Image Editor

Layout

An image context menu uses special values such as - and | to add a new row and add veritcal lines. For example, the JavaScript code below produces grid layout menu for context menu.

Inline

For example, user can be restriced only to align, remove and caption an image using the following JavaScript code:

Page item Initialization JavaScript Code

function( pOptions ){
  pOptions.imageEditButtons = ['imageAlign', 'imageRemove', 'imageCaption']
  return pOptions;
}

Grid

Initialization JavaScript Code

function( pOptions ){
  pOptions.imageEditButtons = ['imageCaption', '|', 'imageSize', '-', 'imageAlign', '|', 'imageRemove']
  return pOptions;
}