Adding a colorbutton in tinymce dialog with api 4.x doesn't work

Question

I'm trying to add a colorbutton in a TinyMCE dialog box to replace my old color selector which was initially created with a select input.

See : ColorButton : API 4.X

This class creates a color button control. This is a split button in which the main button has a visual representation of the currently selected color. When clicked the caret button displays a color picker, allowing the user to select a new color.

I can add and see the new colorbutton in the dialog box but it doesn't show the colorpicker when clicked.

Here is my code:

editor.windowManager.open( {
    title: 'Choose color',
    body: [
        {
            type: 'listbox',
            name: 'bg-color',
            label: 'Color (select)',
            'values': [
                {text: 'White', value: '#FFF'},
                {text: 'Black', value: '#000'},
                {text: 'Silver', value: 'silver'},
            ]
        },
        {
            type: 'ColorButton',
            name: 'bg-color2',
            label: 'Color (colorpicker)',
        },
    ],
    onsubmit: function(e) {
        // Do something here
    }
});

And you will find a tinymce fiddle here to illustrate this issue:http://fiddle.tinymce.com/sfeaab

Since my debugger doesn't show any JS error, is there something wrong in this code or is there another way to add a colorpicker in a dialogbox?

Thanks!

Answer 1

@MavBzh I think you've a wrong perception on how the color button works. The ColorButton UI is only help with rendering a button which not much difference with PanelButton UI. you can see this example http://fiddle.tinymce.com/sfeaab/3 in this fiddle I use textcolor plugin example.

So, in order to use color button you're required to specify the Panel to hold the color picker.

{
    type: 'colorbutton',
    name: 'color',
    text: 'Color',
    selectcmd: 'ForeColor',
    panel: {
        role: 'application',
        ariaRemember: true,
        html: renderColorPicker,
        onclick: onPanelClick
    },
    onclick: onButtonClick

}

then later set onclick callback action and render the color picker HTML output yourself, the renderColorPicker function is used as the panel content, then assigned onPanelClick callback to put the color to the text placeholder in the ColorButton.

PS: in the fiddle I used v4.0.21