Skip to main content

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.

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.

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:

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

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.

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.

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.

Initialization JavaScript Code
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.

Initialization JavaScript Code
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.

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

imageRoundPercent​

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

Initialization JavaScript Code
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.

HTML when enabled
<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.

HTML when disabled
<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.

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​

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.