Change Toolbar

The action exposes an easy way to manipulate the editor's toolbar preset using a dynamic action interface in the page designer, for example:

• change the number of visible buttons within the toolbar group
• add button(s) to toolbar group
• remove button(s) from toolbar group
• remove toolbar group

Dynamic Action pre-requisites

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

Change Number of Visible Buttons

Changes the number of buttons visible in the given toolbar group.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Toolbar
Toolbar Customization	Select list	Must be set to Change Number of Visible Buttons
Group	Select list	The editor's toolbar group to be updated.
Buttons Visible	Number	a new number of buttons visible in the selected group.

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 shows only one button in the toolbar group paragraph. Hidden buttons are available after expanding toolbar paragraph group.

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 Toolbar
3. Set Settings \ Toolbar Customization to Change Number of Visible Buttons
4. Set Settings \ Group to Paragraph
5. Set Settings \ Buttons Visible to 1
6. Clear Affected Elements \ Selection Type
7. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Change Number of Visible Buttons in the sample application example page available online.

Add Button

Adds the selected Froala button to the specified Froala toolbar group in the given position.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Toolbar
Toolbar Customization	Select list	Must be set to Add Button
Group	Select list	The toolbar group to be updated
Button	Select list	The toolbar button to be added to the selected group
Button Position	Number	Position of the new button in the selected group

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 adds a new button in the beginning of the toolbar group paragraph.

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 Toolbar
3. Set Settings \ Toolbar Customization to Add Button
4. Set Settings \ Group to Paragraph
5. Set Settings \ Button to Emoticons
6. Set Settings \ Button Position to 1
7. Clear Affected Elements \ Selection Type
8. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Add Button in the sample application example page available online.

Add Buttons

Adds multiple buttons to the specified Froala toolbar group in the given position.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Toolbar
Toolbar Customization	Select list	Must be set to Add Buttons
Group	Select list	Froala toolbar group to be updated
Buttons	Text	Comma-separated list of toolbar buttons to be added
Button Position	Number	Position of new buttons in the selected group

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 adds new buttons in the beginning of the toolbar group paragraph.

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 Toolbar
3. Set Settings \ Toolbar Customization to Add Button
4. Set Settings \ Group to Paragraph
5. Set Settings \ Buttons to specialCharacters,emoticons
6. Set Settings \ Button Position to 1
7. Clear Affected Elements \ Selection Type
8. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Add Button in the sample application example page available online.

Remove Button From Group

Removes the selected Froala button from the specified Froala toolbar group

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Toolbar
Toolbar Customization	Select list	Must be set to Remove Button From Group
Group	Select list	Froala toolbar group to be updated
Button	Select list	Froala button to be removed from the selected group

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 removes button Font size from the toolbar group paragraph.

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 Toolbar
3. Set Settings \ Toolbar Customization to Remove Button From Group
4. Set Settings \ Group to Paragraph
5. Set Settings \ Button to Font size
6. Clear Affected Elements \ Selection Type
7. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Remove Button From Group in the sample application example page available online.

Remove All Buttons From Group

Removes all the buttons from the selected toolbar group.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Toolbar
Toolbar Customization	Select list	Must be set to Remove All Buttons From Group
Group	Select list	Froala toolbar group to be updated

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 removes all buttons from the toolbar group paragraph.

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 Toolbar
3. Set Settings \ Toolbar Customization to Remove All Buttons From Group
4. Set Settings \ Group to Paragraph
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 Remove All Buttons From Group in the sample application example page available online.

Remove All Buttons

Removes all buttons from all toolbar groups.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Toolbar
Toolbar Customization	Select list	Must be set to Remove All Buttons

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 removes all buttons from toolbar groups paragraph, text, rich and misc.

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 Toolbar
3. Set Settings \ Toolbar Customization to Remove All Buttons
4. Clear Affected Elements \ Selection Type
5. Set Execution Options \ Fire on Initialization to Disabled

Live demo

Give it a try

Test the plug-in action Remove All Buttons in the sample application example page available online.

Remove Buttons From Group

Removes multiple buttons from the selected Froala toolbar group.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Toolbar
Toolbar Customization	Select list	Must be set to Remove Buttons From Group
Group	Select list	Froala toolbar group to be updated
Buttons	Text	Comma-separated list of buttons to be removed from selected toolbar group

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 removes buttons paragraphFormat,fontFamily,fontSize from the toolbar group paragraph.

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 Toolbar
3. Set Settings \ Toolbar Customization to Remove Buttons From Group
4. Set Settings \ Group to Paragraph
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 Remove Buttons From Group in the sample application example page available online.

Remove Group

Removes a selected group from toolbar.

Settings

Attribute	Type	Description
Action	Select list	Must be set to Change Toolbar
Toolbar Customization	Select list	Must be set to Remove Group
Group	Select list	Toolbar group to be removed

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 removes paragraph group from the 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 Toolbar
3. Set Settings \ Toolbar Customization to Remove Group
4. Set Settings \ Group to Paragraph
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 Remove Group in the sample application example page available online.