Customization of the HTML editor is not possible

Hi,

I want to customize the HTML editor in Cockpit to leave only the Bold and Italic options.

I saw in the documentation that this was possible.

{
    "iframe"         : false,
    "mode"           : "split",
    "markdown"       : false,
    "enablescripts"  : false,
    "height"         : 500,
    "maxsplitsize"   : 1000,
    "codemirror"     : { /* codemirror settings */ },
    "toolbar"        : [ "bold", "italic", "strike", "link", "image", "blockquote", "listUl", "listOl" ],
    "lblPreview"     : "Preview",
    "lblCodeview"    : "HTML",
    "lblMarkedview"  : "Markdown"
}

To test it, I decided to remove the Bold button (see toolbar key). It works.

{
    "iframe"         : false,
    "mode"           : "split",
    "markdown"       : false,
    "enablescripts"  : false,
    "height"         : 500,
    "maxsplitsize"   : 1000,
    "codemirror"     : { /* codemirror settings */ },
    "toolbar"        : [ "italic", "strike", "link", "image", "blockquote", "listUl", "listOl" ],
    "lblPreview"     : "Preview",
    "lblCodeview"    : "HTML",
    "lblMarkedview"  : "Markdown"
}

Then I tested leaving only Bold and Italic (see toolbar key)… but it doesn’t work. All the buttons remain displayed.

{
    "iframe"         : false,
    "mode"           : "split",
    "markdown"       : false,
    "enablescripts"  : false,
    "height"         : 500,
    "maxsplitsize"   : 1000,
    "codemirror"     : { /* codemirror settings */ },
    "toolbar"        : [ "bold", "italic" ],
    "lblPreview"     : "Preview",
    "lblCodeview"    : "HTML",
    "lblMarkedview"  : "Markdown"
}

I tested again by deleting only the ListUl and ListOl (see toolbar key)… but again it doesn’t work. All the buttons remain displayed.

{
    "iframe"         : false,
    "mode"           : "split",
    "markdown"       : false,
    "enablescripts"  : false,
    "height"         : 500,
    "maxsplitsize"   : 1000,
    "codemirror"     : { /* codemirror settings */ },
    "toolbar"        : [ "bold", "italic", "strike", "link", "image", "blockquote" ],
    "lblPreview"     : "Preview",
    "lblCodeview"    : "HTML",
    "lblMarkedview"  : "Markdown"
}

I don’t understand where the problem comes from. I know that it is possible to hide the buttons by injecting CSS into Cockpit… but if it is possible to do otherwise, I think it would be better.

Do you have an idea ?

Thanks.

I had a look into the general HTML editor initialization and could not find a reason that would explain this behavior.
The only buttons that are always added to the field options are the “Finder” and “Assets” buttons.

To recap

  • if you only remove “bold” it hides “bold”
  • if you remove any other it does not adjust anything

Is this still the behavior?
Or does removing only “bold” not change anything anymore as well?

Here are the details of the problem :

1/ By default, all buttons are displayed


"toolbar": [ "bold", "italic", "strike", "link", "image", "blockquote", "listUl", "listOl" ],

2/

Button deleted : Bold
Duplicate buttons : ListOl


"toolbar": [ "italic", "strike", "link", "image", "blockquote", "listUl", "listOl" ],

3/

Button deleted : Bold, Italic
Duplicate buttons : ListUl, ListOl


"toolbar": [ "strike", "link", "image", "blockquote", "listUl", "listOl" ],

4/

Button deleted : Bold, Italic, Strike
Duplicate buttons : Blockquote, ListUl, ListOl


"toolbar": [ "link", "image", "blockquote", "listUl", "listOl" ],

5/

Button deleted : Bold, Italic, Strike, Link
Duplicate buttons : Image, Blockquote, ListUl, ListOl


"toolbar": [ "image", "blockquote", "listUl", "listOl" ],

6/

Button deleted : Bold, Italic, Strike, Link, Image
Duplicate buttons : Link, Image, Blockquote, ListUl, ListOl


"toolbar": [ "blockquote", "listUl", "listOl" ],

7/

Button deleted : Bold, Italic, Strike, Link, Image, Blockquote
Duplicate buttons : Strike, Link, Image, Blockquote, ListUl, ListOl


"toolbar": [ "listUl", "listOl" ],

8/

Button deleted : Bold, Italic, Strike, Link, Image, Blockquote, ListUl
Duplicate buttons : Italic, Strike, Link, Image, Blockquote, ListUl, ListOl


"toolbar": [ "listOl" ],

9/

Button deleted : Bold, Italic, Strike, Link, Image, Blockquote, ListUl, ListOl
All buttons are displayed


"toolbar": [ ],

10/

The only buttons I want to display : Bold, Italic
All buttons are displayed


"toolbar": [ "bold", "italic" ],

Bye.

:laughing: that was very thorough. Thank you.
And it is now even more confusing how and why this happens.
I’ll get back to you.