创建 CKEditor 插件时，如何在对话框中添加“颜色选择器”？答案

【问题标题】：When creating a CKEditor plugin, how can I add a "colorpicker" to my dialog?创建 CKEditor 插件时，如何在对话框中添加“颜色选择器”？
【发布时间】：2012-01-11 03:44:04
【问题描述】：

用户单击我的插件的按钮。
弹出对话框，其中包含一些文本框等。
在该对话框中，用户可以单击一个按钮，然后会弹出一个颜色选择器，让用户选择他想要的颜色。

【问题讨论】：

你有解决这个小问题的办法吗？因为我有完全相同的问题:)

标签： javascript jquery colors ckeditor

【解决方案1】：

今天我遇到了同样的问题。这是我的解决方案，它实际上是来自 CKEditor 4.2 的 TableCell 插件的复制粘贴。希望对你有帮助

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)
                            }
                        }
                    ]
                },
                ...
            ]
        }
    ],

};
});

【讨论】：

你拯救了我的一天。 :D

【解决方案2】：

使用以下颜色选择器插件；附加到 CKEditor form 中的 input[type="text"] 字段：

http://jscolor.com/

这个实现的不同之处在于用户不需要click 一个按钮来选择颜色。当用户focuses 进入相应的字段时触发颜色选择。

【讨论】：