How to customize the CKEditor menu toolbar in XWiki?

1. Navigate to the WYSIWYG Editor page using this path Administrator → Editing → WYSIWYG Editor or using the navigation shortcut and start typing "CKEditor" and select "AdminSection" page.
2. Before proceeding with any modifications or updates to your CKEditor advanced configuration, creating a backup of your current customization configuration is strongly advised if they exist.
3. Next, check the list of enabled/disabled plugins and toolbar features. Make sure to enable (uncheck) these plugins: colorbutton, font, justify. And also, enable these features: BulletedList, Copy, CopyFormatting, Cut, HorizontalRule, NumberedList, RemoveFormat, SpecialChar, Strike, Subscript, Superscript, Underline, Unlink, xwiki-macro
4. Finally, copy and paste the code at the end of the the Advanced configuration section and save the changes.

   // Define changes to default configuration here.
   // Note that this setting is composed by "toolbar_" added to the toolbar name, which in this case is called "Word".
   // This second part of the setting name can be anything. You must use this name in the CKEDITOR.config.toolbar setting in order to instruct the editor which `toolbar_(name)` setting should be used.
   config.toolbar_Word = [
       { name: "actions", items: ["Undo", "Redo", "Cut", "Copy", "CopyFormatting"] },
       { name: "styles", items: ["Format", "Font", "FontSize"] },
       { name: "colors", items: ["TextColor", "BGColor"] },
       {
         name: "basicstyles",
         items: [
           "Bold",
           "Italic",
           "Underline",
           "Strike",
           "Subscript",
           "Superscript",
           "-",
           "RemoveFormat",
         ],
       },
       { name: "paragraph", items: ["NumberedList", "BulletedList", "Blockquote"] },
       "/",
       { name: "links", items: ["Link", "Unlink"] },
       {
         name: "insert",
         items: ["Image", "Table", "HorizontalRule", "SpecialChar", "xwiki-macro"],
       },
       { name: "document", items: ["Source"] },
       { name: "tools", items: ["Maximize"] },
   ];
   
   // Load toolbar_Name where Name = Word.
   config.toolbar = "Word";

5. Refresh your page, and you'll see a new menu toolbar.
    

Before 

After