Когда я создаю плагин CKEditor, как я могу добавить «палитру цветов» в мой диалог?

Question

1. Пользователь нажимает кнопку для моего плагина.
2. Появляется диалоговое окно с текстовыми полями и т. Д.
3. Внутри этого диалога пользователь может нажать кнопку, и появится всплывающее окно выбора цвета, позволяющее пользователю выбрать, какой цвет он хочет.

Answer 1

Сегодня у меня была такая же проблема. Вот мое решение, которое является практически копией-вставкой из плагина TableCell из CKEditor 4.2. Надеюсь, это поможет

CKEDITOR.dialog.add( 'myDialog', function( editor ) {
return {
    title: 'Add Data',
    minWidth: 300,
    minHeight: 200,
    contents: [
        {
            id: 'dataTab',
            label: 'Line',
            title: 'Line',
            elements: [
                ...
                {   
                    type: "hbox",
                    padding: 0,
                    widths: ["80%", "20%"],
                    children: [
                        {
                            id: 'linecolor',
                            type: 'text',
                            label: 'Line color',
                            setup: function( element ) {
                                ...
                            },
                            commit: function( element ) {
                                ...
                            }
                        },
                        {
                            type: "button",
                            id: "lineColorChooser",
                            "class": "colorChooser",
                            label: "Choose",
                            style: "margin-left: 8px",
                            onLoad: function () {
                                this.getElement().getParent().setStyle("vertical-align", "bottom")
                            },
                            onClick: function () {
                                editor.getColorFromDialog(function (color) {
                                    color && this.getDialog().getContentElement("dataTab", "linecolor").setValue( color );
                                    this.focus()
                                }, this)
                            }
                        }
                    ]
                },
                ...
            ]
        }
    ],

};
});

Answer 2

Используйте следующий плагин выбора цвета; прикрепленный к полю input[type="text"] в вашем CKEditor form:

http://jscolor.com/

Эта реализация отличается тем, что пользователю не требуется click кнопка для выбора цвета. Выбор цвета запускается, когда пользователь focus входит в соответствующее поле.