Change Settings
The dynamic action change settings exposes an easy way to manipulate the editor’s configuration.
:::note 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
Section titled “Allow Image Pasting From Clipboard”Enables or disables pasting images from the end-user clipboard.
| 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. |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Allow Image Pasting from Clipboard
- Set Settings / Value to Disabled
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Allow Image Pasting From Clipboard in the sample application example page available online.
:::
- 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
Section titled “Allow Resizing Image with Mouse”Enables or disables resizing images using mouse by the end-user.
| 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. |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Allow Resizing Image with Mouse
- Set Settings / Value to Disabled
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Allow Resizing Image with Mouse in the sample application example page available online.
:::
- 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
Section titled “Browser Spell check”Enabled or disabled a browser built-in spell checking.
| 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. |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Browser Spellcheck
- Set Settings / Value to Disabled
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Browser spell-check in the sample application example page available online.
:::
- 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
Section titled “Direction Right To Left Enabled”Enables or disabled editor’s support for direction right to left
| 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 |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Direction Right To Left Enabled
- Set Settings / Value to Enabled
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Direction Right To Left Enabled in the sample application example page available online.
:::
- This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option direction.
Maximum Height
Section titled “Maximum Height”Overrides maximum height of an editor computed using plug-in attribute Height.
| 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. |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Maximum Height
- Set Settings / Value to
500 - Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Maximum Height in the sample application example page available online.
:::
- 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
Section titled “Minimum Height”Overrides minimum height of an editor computed using plug-in attribute Height.
| 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. |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Minimum Height
- Set Settings / Value to
500 - Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Minimum Height in the sample application example page available online.
:::
- This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option heightMin.
Placeholder Text
Section titled “Placeholder Text”Overrides the placeholder text defined using page item attribute Appearance / Value Placeholder.
| 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 |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Placeholder Text
- Set Settings / Value to
A new placeholder text - Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Placeholder Text in the sample application example page available online.
:::
- This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option placeholderText.
Show Current Font Family
Section titled “Show Current Font Family”Enables or disables preview of currently used Font Family for focused paragraph in a document.
| 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. |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Show Current Font Family
- Set Settings / Value to Disabled
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Show Current Font Family Selection in the sample application example page available online.
:::
- This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option fontFamilySelection.
Show Current Font Size Selection
Section titled “Show Current Font Size Selection”Enables or disables preview of currently used font size for focused paragraph in a document.
| 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. |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Show Current Font Size Selection
- Set Settings / Value to Disabled
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Show Current Font Size Selection in the sample application example page available online.
:::
- This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option fontSizeSelection.
Show Current Paragraph Selection
Section titled “Show Current Paragraph Selection”Enables or disables preview of currently used pagrapgh style for focused paragraph in a document.
| 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. |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Show Current Paragraph Selection
- Set Settings / Value to Disabled
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Show Current Font Size Selection in the sample application example page available online.
:::
- This feature can be also customized on page item level using attribute Initialization JavaScript Code and Froala option paragraphFormatSelection.
Sticky Toolbar
Section titled “Sticky Toolbar”Enables or disables sticky toolbar overriding plug-in page item attribute Settings / Sticky Toolbar.
| 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. |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Sticky Toolbar
- Set Settings / Value to Enabled
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Sticky Toolbar in the sample application example page available online.
:::
- 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
Section titled “Sticky Toolbar Top Offset”Defines the sticky toolbar top offset in pixels overriding the plug-in page item attribute Toolbar Top Offset.
| 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 |
:::note 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
- Set When / Event to UC Froala Before Initialization
- Set When / Selection Type to JavaScript Expression
- Set When / JavaScript Expression to
document
True (or false) action definition
- Set Identification / Action to UC - Rich Text Editor Pro (Extend) [Plug-in]
- Set Settings / Action to Change Settings
- Set Settings / Option to Sticky Toolbar Top Offset
- Set Settings / Value to
200 - Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Sticky Toolbar in the sample application example page available online.
:::
- 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.