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.

ColorButton screenshot

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!

+1 can you create a tinymce.fiddle? (http://fiddle.tinymce.com/)? — Thariama, May 07 '14 at 09:14
Here is a tinymce fiddle to illustrate this issue: [http://fiddle.tinymce.com/sfeaab](http://fiddle.tinymce.com/sfeaab) — Julien Le Thuaut, May 09 '14 at 06:44

score 2 · Accepted Answer · answered May 15 '14 at 16:32

2

@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

answered May 15 '14 at 16:32

nonsensecreativity

870
1
7
15

+1 this works great. but do you know how to insert the selected color value in the editor? I am trying like this: http://pastebin.com/raw.php?i=2SU4Tcsd but it isn't working. Thanks – Towfiq May 16 '14 at 13:08
Hi and many thanks for this answer! You're right, I had a wrong perception on how it worked. Thanks for the fiddle. Is it possible to change the display of the chosen color on the split button? – Julien Le Thuaut May 19 '14 at 08:24
@Towfiq you need to add this line `buttonCtrl._value = value;` in the onPanelClick function so the parent can have the color value. – nonsensecreativity May 20 '14 at 23:24
@MavBzh it's not possible to change the display for the button unless you modify the tinyMCE ColorButton UI script, it's already predefined by the tinyMCE ColorButton UI. If you try to make a colorpicker, I would suggest you create your own callback, I've tried this in WordPress tinymce by modifying the callback of the windows using TextBox UI. – nonsensecreativity May 21 '14 at 00:42
1

here is my fiddle but will only works in WordPress, if you're also working on WordPress tinyMCE make sure you enqueue all the required color picker script http://fiddle.tinymce.com/lheaab/1 – nonsensecreativity May 21 '14 at 00:48
Nackle the code you provided didn't work but, I got into the right direction. thanks – Towfiq May 21 '14 at 19:51
@Towfiq would suggest you to use `console.log( this )` to debug the object in firebug :) – nonsensecreativity May 22 '14 at 19:05
@nackle your buttonCtrl._value = value; doesn't work for me. Could you assist? Here is my fiddle:http://fiddle.tinymce.com/FYeaab It works for the older version of mce but I need it to work for the latest. – ZacNespral21 Sep 08 '15 at 00:42
@nackle Could you assist with my above comment? I'm really stuck on this :( – ZacNespral21 Sep 10 '15 at 22:45
@nackle here is a new fiddle with a working dropdown, http://fiddle.tinymce.com/sZeaab i still need help getting the variable to pass through on submit though – ZacNespral21 Sep 10 '15 at 23:27
@ZacNespral21, Hi sorry for late reply, been on hiatus due to accident. Do you still need help with tinyMCE? also if it's about WordPress tinyMCE please post the question to wordpress.stackexchange.com – nonsensecreativity Mar 02 '16 at 01:35
@ZacNespral21, if you're still need the colorpicker for tinyMCE and WordPress, I made a small tutorial here http://wp.me/p5xRVo-2y – nonsensecreativity Mar 02 '16 at 04:56
I wonder why you created the function "renderColorPicker". Is there a way to popup the existing colorpicker of tinymce? – Jonny Sep 24 '16 at 17:36
@Jonny renderColorPicker is needed since the tinyMCE do not have a built in colorpicker, the function will handle the color button to display it in grid (see the fiddle). It maybe possible to build or call other colorpicker library here but I haven't tested it yet. Also this is an old thread maybe there is a new work around for this issue – nonsensecreativity Sep 25 '16 at 16:49
@nonsensecreativity: Tnx, got that in between. There is a ui type for colorpicker you can use to create one and yes, colorpicker plugin therefore required. – Jonny Sep 28 '16 at 18:25

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

1 Answers1