dialog - 使用 api 4.x 在 tinymce 对话框中添加颜色按钮不起作用

Question

我正在尝试在 TinyMCE 对话框中添加一个颜色按钮，以替换我最初使用选择输入创建的旧颜色选择器。

参见: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.

我可以在对话框中添加并看到新的颜色按钮，但单击时它不显示颜色选择器。

这是我的代码:

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
    }
});

你会在这里找到一个 tinymce fiddle 来说明这个问题:http://fiddle.tinymce.com/sfeaab

由于我的调试器没有显示任何 JS 错误，这段代码是否有问题，或者是否有其他方法可以在对话框中添加颜色选择器？

谢谢!

Answer 1

@MavBzh 我认为您对颜色按钮的工作原理有错误的认识。 ColorButton UI 只是帮助渲染一个按钮，这与 PanelButton UI 没有太大区别。你可以看到这个例子 http://fiddle.tinymce.com/sfeaab/3在这个 fiddle 中，我使用了 textcolor 插件示例。

因此，为了使用颜色按钮，您需要指定面板来容纳颜色选择器。

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

}

然后设置onclick回调 Action ，自己渲染color picker HTML输出，renderColorPicker函数作为panel内容，然后赋值onPanelClick回调给ColorButton中的text placeholder上色.

PS: fiddle 里我用的是v4.0.21