How to customize the CKEditor menu toolbar in XWiki?

Last modified by Nikita Petrenko on 2024/12/24

Information

You can modify this or create another toolbar with a custom name and select it by name to load. Remember to check the list of enabled/disabled plugins and features if the icon (button) hasn't appeared in your menu.

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.
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.
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

Finally, copy and paste the code below in 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";

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

Before 
original (default).png

After
after changes.png

Get Connected