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
:::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.
:::
Change Number of Visible Buttons
Section titled “Change Number of Visible Buttons”Changes the number of buttons visible in the given toolbar group.
| 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. |
:::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 shows only one button in the toolbar group paragraph. Hidden buttons are available after expanding toolbar paragraph group.
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 Toolbar
- Set Settings / Toolbar Customization to Change Number of Visible Buttons
- Set Settings / Group to Paragraph
- Set Settings / Buttons Visible to
1 - Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Change Number of Visible Buttons in the sample application example page available online.
:::
Add Button
Section titled “Add Button”Adds the selected Froala button to the specified Froala toolbar group in the given position.
| 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 |
:::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 adds a new button in the beginning of the toolbar group paragraph.
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 Toolbar
- Set Settings / Toolbar Customization to Add Button
- Set Settings / Group to Paragraph
- Set Settings / Button to Emoticons
- Set Settings / Button Position to
1 - Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Add Button in the sample application example page available online.
:::
Add Buttons
Section titled “Add Buttons”Adds multiple buttons to the specified Froala toolbar group in the given position.
| 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 |
:::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 adds new buttons in the beginning of the toolbar group paragraph.
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 Toolbar
- Set Settings / Toolbar Customization to Add Button
- Set Settings / Group to Paragraph
- Set Settings / Buttons to
specialCharacters,emoticons - Set Settings / Button Position to
1 - Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Add Button in the sample application example page available online.
:::
Remove Button From Group
Section titled “Remove Button From Group”Removes the selected Froala button from the specified Froala toolbar group
| 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 |
:::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 removes button Font size from the toolbar group paragraph.
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 Toolbar
- Set Settings / Toolbar Customization to Remove Button From Group
- Set Settings / Group to Paragraph
- Set Settings / Button to Font size
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip 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
Section titled “Remove All Buttons From Group”Removes all the buttons from the selected toolbar group.
| 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 |
:::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 removes all buttons from the toolbar group paragraph.
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 Toolbar
- Set Settings / Toolbar Customization to Remove All Buttons From Group
- Set Settings / Group to Paragraph
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip 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
Section titled “Remove All Buttons”Removes all buttons from all toolbar groups.
| Attribute | Type | Description |
|---|---|---|
| Action | Select list | Must be set to Change Toolbar |
| Toolbar Customization | Select list | Must be set to Remove All Buttons |
:::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 removes all buttons from toolbar groups paragraph, text, rich and misc.
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 Toolbar
- Set Settings / Toolbar Customization to Remove All Buttons
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Remove All Buttons in the sample application example page available online.
:::
Remove Buttons From Group
Section titled “Remove Buttons From Group”Removes multiple buttons from the selected Froala toolbar group.
| 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 |
:::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 removes buttons paragraphFormat,fontFamily,fontSize from the toolbar group paragraph.
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 Toolbar
- Set Settings / Toolbar Customization to Remove Buttons From Group
- Set Settings / Group to Paragraph
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Remove Buttons From Group in the sample application example page available online.
:::
Remove Group
Section titled “Remove Group”Removes a selected group from toolbar.
| 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 |
:::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 removes paragraph group from the 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 Toolbar
- Set Settings / Toolbar Customization to Remove Group
- Set Settings / Group to Paragraph
- Clear Affected Elements / Selection Type
- Set Execution Options / Fire on Initialization to Disabled
:::tip Give it a try
Test the plug-in action Remove Group in the sample application example page available online.
:::