Change Settings

The dynamic action change settings exposes an easy way to manipulate the editor's configuration.

Dynamic Action pre-requisites

The guidelines describing dynamic action configuration (dynamic action event, triggering element and affected elements) are described in parent document Configuration.

Allow Image Pasting From Clipboard

Enables or disables pasting images from the end-user clipboard.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Allow Image Pasting From Clipboard
Value	Switch	Enables or disabled image pasting from clipboard.

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements

The example disables pasting images from the end-user clipboard.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Allow Image Pasting from Clipboard
4. Set Settings \ Value to Disabled
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Allow Image Pasting From Clipboard in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option imagePaste.
• Learn more about image support in Concepts \ Images.
• Learn more about customizing images in Customizations \ Images.

Allow Resizing Image with Mouse

Enables or disables resizing images using mouse by the end-user.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Allow Resizing Image with Mouse
Value	Switch	Enables or disabled image resizing.

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example disables resizing images using mouse.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Allow Resizing Image with Mouse
4. Set Settings \ Value to Disabled
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Allow Resizing Image with Mouse in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option imageResize.
• Learn more about image support in Concepts \ Images.
• Learn more about customizing images in Customizations \ Images.

Browser Spell check

Enabled or disabled a browser built-in spell checking.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Browser Spell check
Value	Switch	Enables or disabled browser spell check.

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example disables a browser built-in spell checking.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Browser Spellcheck
4. Set Settings \ Value to Disabled
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Browser spell-check in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option spellcheck.
• The plug-in supports thrif-party integration with advanced Web Spell Checker WProofreader

Direction Right To Left Enabled

Enables or disabled editor's support for direction right to left

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Direction Right To Left Enabled
Value	Switch	When enabled, the plug-in uses right to left direction

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example enables direction right to left..

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Direction Right To Left Enabled
4. Set Settings \ Value to Enabled
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Direction Right To Left Enabled in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option direction.

Maximum Height

Overrides maximum height of an editor computed using plug-in attribute Height.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Maximum Height
Value	Text	A new maximum height of the editor working area in pixels. When the value 100% is used then, the editor expands editor's height to fit content.

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example sets the maximum height of 500px.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Maximum Height
4. Set Settings \ Value to 500
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Maximum Height in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option heightMax.
• If the plug-in attribute Settings \ Expand height to fit rich text is enabled, then maximum height is ignored
• The editor's height applies to working area without toolbar

Minimum Height

Overrides minimum height of an editor computed using plug-in attribute Height.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Minimum Height
Value	Text	A new minimum height of the editor working area in pixels.

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example sets the minimum height of 500px.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Minimum Height
4. Set Settings \ Value to 500
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Minimum Height in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option heightMin.

Placeholder Text

Overrides the placeholder text defined using page item attribute Appearance \ Value Placeholder.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Placeholder Text
Value	Text	A new placeholder text to be applied

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example sets placeholder A new placeholder text.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Placeholder Text
4. Set Settings \ Value to A new placeholder text
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Placeholder Text in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option placeholderText.

Show Current Font Family

Enables or disables preview of currently used Font Family for focused paragraph in a document.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Show Current Font Family
Value	Switch	Shows or hides the current font family. When disabled a simple drop down list is used.

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example disables font family preview in toolbar.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Show Current Font Family
4. Set Settings \ Value to Disabled
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Show Current Font Family Selection in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option fontFamilySelection.

Show Current Font Size Selection

Enables or disables preview of currently used font size for focused paragraph in a document.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Show Current Font Size Selection
Value	Switch	Shows or hides the current font size for focused paragraph. When disabled a simple drop down list is used.

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example disables font size preview in toolbar.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Show Current Font Size Selection
4. Set Settings \ Value to Disabled
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Show Current Font Size Selection in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option fontSizeSelection.

Show Current Paragraph Selection

Enables or disables preview of currently used pagrapgh style for focused paragraph in a document.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Show Current Paragraph Selection
Value	Switch	Shows or hides the current paragraph style in a document. When disabled a simple drop down list is used.

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example disables paragraph style preview in toolbar.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Show Current Paragraph Selection
4. Set Settings \ Value to Disabled
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Show Current Font Size Selection in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option paragraphFormatSelection.

Sticky Toolbar

Enables or disables sticky toolbar overriding plug-in page item attribute Settings \ Sticky Toolbar.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Sticky Toolbar
Value	Switch	Enable or disable sticky toolbar.

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example enables the editor's sticky toolbar.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Sticky Toolbar
4. Set Settings \ Value to Enabled
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Sticky Toolbar in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option toolbarSticky.
• The sticky toolbar uses offset used to position toolbar against page top edge. The offset can be also set using the dynamic action plug-in and can be defined as next true (or false) action. See section for Sticky Toolbar Top Offset

Sticky Toolbar Top Offset

Defines the sticky toolbar top offset in pixels overriding the plug-in page item attribute Toolbar Top Offset.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Settings
Option	Select list	Must be set to Sticky Toolbar
Value	Number	A new toolbar offset in pixels

Example

Affected Elements

The customization is applied to all page items triggering the plug-in event UC Froala Before Initialization. Learn more about applying dynamic action to specific plug-in page items in the section Affected Elements.

The example defines sticky toolbar top offset to 200px.

Dynamic action definition

1. Set When \ Event to UC Froala Before Initialization
2. Set When \ Selection Type to JavaScript Expression
3. Set When \ JavaScript Expression to document

True (or false) action definition

1. Set Identification \ Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
2. Set Settings \ Action to Change Settings
3. Set Settings \ Option to Sticky Toolbar Top Offset
4. Set Settings \ Value to 200
5. Clear Affected Elements \ Selection Type
6. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Sticky Toolbar in the sample application example page available online.

Learn more

• This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option toolbarStickyOffset.
• The sticky toolbar top offset requires sticky toolbar enabled. See the plug-in dynamic action Sticky Toolbar.
• True (or false) action implementing sticky toolbar top offset can be defined within same dynamic action enabling sticky toolbar.