Configuration

The Rich Text Editor Pro image configuration can be set using a page item attribute Initialization JavaScript Code or using supporting dynamic action plug-in.

:::tip Froala API

All image related options are desrcribed in the Froala documentation.

:::

Default configuration

The plug-in default configuration can be reflected using example anonymous function to be applied in a page item attribute Initialization JavaScript Code.

function( pOptions ) {
  pOptions.imageMaxSize         = 20971520;
  pOptions.imageAllowedTypes    = ["jpeg","jpg","png","gif","webp"];

  pOptions.imageDefaultWidth    = 300;
  pOptions.imageDefaultAlign    = "center";
  pOptions.imageDefaultDisplay  = "block";
  pOptions.imageDefaultMargin   = 5;
  pOptions.imageMinWidth        = 16;

  pOptions.imageInsertButtons   = ["imageBack","|","imageUpload","imageByURL","imageManager"];
  pOptions.imageEditButtons     = ["imageReplace","imageAlign","imageCaption","imageRemove","|","imageLink","linkOpen","linkEdit","linkRemove","-","imageDisplay","imageStyle","imageAlt","imageSize","imageTUI"];
  pOptions.imageAltButtons      = ["imageBack","|"];
  pOptions.imageSizeButtons     = ["imageBack","|"];
  pOptions.imageStyles          = {"fr-rounded": "Rounded", "fr-bordered": "Bordered", "fr-shadow": "Shadow"};


  pOptions.imageMove              = true;
  pOptions.imageResize            = true;
  pOptions.imageResizeWithPercent = false;
  pOptions.imageRoundPercent      = false;
  pOptions.imageMultipleStyles    = true;

  pOptions.imageUpload            = true;
  pOptions.imageUploadRemoteUrls  = true;
  pOptions.imageSplitHTML         = false;
  pOptions.imagePaste             = true;
  pOptions.imagePasteProcess      = true;
  pOptions.imageTextNear          = true;
  pOptions.imageOutputSize        = false;
  pOptions.imageAddNewLine        = false;

  return pOptions;
}

Image default attributes

Whena a new image is added to a document, it’s properties such as width, aligment and display are set based on the following options:

• imageDefaultAlign
• imageDefaultDisplay
• imageDefaultWidth
• imageDefaultMargin

These values can be changed using a page item standard attribute Initialization JavaScript Code.

function( pOptions ) {
  pOptions.imageDefaultWidth    = 300;
  pOptions.imageDefaultAlign    = "center"; // or "left" or "right"
  pOptions.imageDefaultDisplay  = "block";  // or "inline" or "0" to skip margin
  pOptions.imageDefaultMargin   = 5;

  return pOptions;
}

Options

imageMinWidth

The option imageMinWidth restricts what is the minimum width of an image when resizing using mouse.

function( pOptions ){
  pOptions.imageMinWidth = 100;

  return pOptions;
}

The animation above presents resizing an image to minimum width value defined as 100px.

imageMove

The option imageMove disables the possibility to drag and drop image within a document. When set to false, an image must be cut from a current place and pasted into a new position.

:::tip Why?

Moving an image within existing document may mess with a current document layout. It might be safer to cut and paste an image manually instead of dragging it in complex document structure.

:::

imageOutputSize

The option imageOutputSize affects how an image size is set in a document HTML. When set to false the plug-in sets an image size using only the attribute `style.

"Disabled"]

<img src="..." style="width: 300px">

When set to true an image size is described using style, width and height attributes.

"Enabled"]

<img src="..." style="width: 300px" width="300" height="200">

imagePaste

The option imagePaste enables or disables pasting images from the end-user clipboard.

function( pOptions ) {
  pOptions.imagePaste = true;
  return pOptions;
}

imageResize

The option imageResize restricts whether an image can be resized using mouse. When set to false the image can’t be resized using mouse.

function( pOptions ){
  pOptions.imagResize = false;
  return pOptions;
}

imageResizeWithPercent

By default the image resize is using PX. Enabling option imageResizeWithPercent will use % instead when resizing an image inside the editor. Images added to a document are added with width property set to 100% occupying all available width in a document.

function( pOptions ){
  pOptions.imageResizeWithPercent = false;
  return pOptions;
}

imageRoundPercent

The option imageRoundPercent forces image size to round to integer value.

function( pOptions ){
  pOptions.imageResizeWithPercent = true;
  pOptions.imageRoundPercent = true;
  return pOptions;
}

imageSplitHTML

The option imageSplitHTML set to true ensures an inserted image is embeded outside the currently selected HTML tag within a document.

For example, when a cursor is placed after text in a paragraph, an inserted images is added in a new paragraph.

<p>Text</p>
<p><img src="..."></p>

On the other hand, when set to false an image is embedded directly after text within a currently selected paragraph.

<p>Text <img src="..."></p>

imageTextNear

The option imageTextNear allows text near an image when it is displayed as inline element and aligned to left or right.

:::note when disabled

When set to false , the option imageDefaultDisplay is ignored. Images are displayed as block elements, and the end-user can’t change an image display mode using image context menu.

:::

Known Issues

:::danger Rich Text Editor Pro version 24.1

• The option imageDefaultMargin has no effect on images.
• The option imageAddNewLine has no effect when adding an image.

:::