Expand my Community achievements bar.

Registration for the AEM Guides User conference on 24th and 25th March 2024 is open.

Is there a way to customize the web-editor toolbar ?

Avatar

Employee

The toolbar in web-editor is completely customizable, there are many customizations that you can achieve, few use cases would be :

  • Add/Remove toolbar options.
    • Examples :
      • Add a button to make the text bold or remove the insert multimedia option from the toolbar as it is not used frequently.
      • Add a custom button in toolbar to define a custom action.
  • Customize toolbar for map and topic separately.

The XML Documentation Solution provides an easy way to customize the web editor toolbar. Below are the high level things that would help in customization:

  1. There is a ui_config.json file which has the configuration for the toolbar icons. The default one can be downloaded from 'Global Profile' under Tools-->XML Documentation-->Folder Profile-->Global Profile-->XML Editor Configuration.Kiran_Mohan_0-1622014705930.png
  2. You can customize the toolbar for map and topic separately (also edit and preview mode). For example - All DITAMap specific configurations can be found with label as 'DitamapEdit'. Refer below code snippet from ui_config.json 
    {
    	"type": "buttonGroup",
    	"label": "DitamapEdit",
    	"show": ["@isAuthorMode", "@isMapEditMode"],
    	"items": [
    	{
    	  "type": "button",
    	  "icon": "textSpaceBefore",
    	  "variant": "quiet",
    	  "title": "Insert Before",
    	  "on-click": "AUTHOR_SHOW_INSERT_ELEMENT_BEFORE_BLOCK_UI"
    	},
    	{
    	  "type": "button",
    	  "icon": "textSpaceAfter",
    	  "variant": "quiet",
    	  "title": "Insert After",
    	  "on-click": "AUTHOR_SHOW_INSERT_ELEMENT_AFTER_BLOCK_UI"
    	}
    }
  3. You can update the ui_config.json to reflect the customization and then save it under the Folder Profile (Path for Global Profile - Tools-->XML Documentation-->Folder Profile-->Global Profile-->XML Editor Configuration).

 

Also sharing the few sample use cases and ways to achieve this via web editor customization:

  1. Adding a new button in web editor toolbar and define a custom event on click of that.
    1. Add a button in web-editor
      • In ui_config.json add an alert button with title as 'Click here' in toolbar.

         

        {
        	"type": "button",
        	"icon": "alert",
        	"variant": "quiet",
        	"title": "Click here",
        	"on-click": "custom.alert"
        }
         

        In this example, it is registering an event with the key name as 'custom.alert'

    2. Define action on click of the button. 
      • Create a ClientLibraryFolder folder with a category as "apps.fmdita.xml_editor.page_overrides". More details on creating a clientlibraryFolder can be found here
      • Create custom js file and define the action on click on the button. Refer sample code below. It is simply showing an alert message on UI. You can define your custom action inside it.
         (function (document, $, ns) {
           "use strict";
        
        $(document).ready(setTimeout(function() {
         fmxml.commandHandler.subscribe({
         key: 'custom.alert',
         next: function() {
         alert("XML Documentation solution version x.x")
         }
         })
        }, 1000))
        
        })(document, Granite.$, Granite.author);

 

More References:

1) XML Documentation Installation and Configuration Guide - Refer chapter 'Customize Web Editor- Customize toolbar'

2) Sample code for customization

 

0 Replies