The forum operates in read-only mode. Please head to StackOverflow for support.

Grouped Color Button

Wed, 04/04/2012 - 17:05

richardd

Joined: 24/05/2011

Posts: 31

Grouped Color Button

A very simple plugin to group colors on the color palette, as requested by webhelio in the CKEditor 3.x forum.

Screenshots

groupedcolorbutton.zip

Installation

1. Extract the contents of the file into the "plugins" folder of CKEditor.
2. In the CKEditor configuration file (config.js) add the following code:

config.extraPlugins = 'groupedcolorbutton';

This plugin replaces the existing TextColor and BGColor buttons, so there should be no need to modify your toolbar configuration.

Customization

To customize the colors and groups displayed, modify the groupedColorButton_colors setting:

config.groupedColorButton_colors =
[
  {
    title: "Brand Colors",
    colors: "A70000,818181,000,BE671A"
  },
  {
    title: "Default Colors",
    colors: CKEDITOR.config.colorButton_colors
  }
];

Attachments:

groupedcolorbutton_1.zip

grouped-color-button_1.png

Tue, 06/05/2012 - 20:47

fredm

Joined: 05/06/2012

Posts: 2

Re: Grouped Color Button

I cannot get it working. Has it to do with 'requires : [ 'panelbutton', 'floatpanel', 'styles' ],'
Does that mean some other plugins must be available?

Wed, 06/06/2012 - 10:33

leejacky

Joined: 06/06/2012

Posts: 12

Re: Grouped Color Button

RichardD wrote:A very simple plugin to group colors on the color palette, as requested by webhelio in the CKEditor 3.x forum.

Screenshots

Grouped-Color-Button.png

License

Licensed under the terms of any of the following licenses at your choice: GPL, LGPL and MPL.

Download

Grouped Color Button v1:
groupedcolorbutton.zip

Installation

1. Extract the contents of the file into the "plugins" folder of CKEditor.
2. In the CKEditor configuration file (config.js) add the following code:
config.extraPlugins = 'groupedcolorbutton';
This plugin replaces the existing TextColor and BGColor buttons, so there should be no need to modify your toolbar configuration.

Customization

To customize the colors and groups displayed, modify the groupedColorButton_colors setting:
config.groupedColorButton_colors =
[
  {
    title: "Brand Colors",
    colors: "A70000,818181,000,BE671A"
  },
  {
    title: "Default Colors",
    colors: CKEDITOR.config.colorButton_colors
  }
];

is this plugin can work on wordpress or only on joomla and drupal ?

Thu, 06/07/2012 - 13:44

richardd

Joined: 24/05/2011

Posts: 31

Re: Grouped Color Button

@FredM: The "requires" directive is the same as the original colorbutton plugin, so I can't see how that would cause a problem. What error message are you getting?

Thu, 06/07/2012 - 13:45

richardd

Joined: 24/05/2011

Posts: 31

Re: Grouped Color Button

@leejacky: I haven't used WordPress, joomla or drupal, but the code is fairly closely based on the original colorbutton plugin, so it should work on any installation.

Thu, 06/07/2012 - 18:42

fredm

Joined: 05/06/2012

Posts: 2

Re: Grouped Color Button

Not any error messages. Simply no grouped colors visible.

Thu, 06/07/2012 - 21:47

richardd

Joined: 24/05/2011

Posts: 31

Re: Grouped Color Button

I've attached a simple stand-alone example for the plugin. You should be able to extract the attached file to a folder and open the "Grouped-Color-Button.html" file in any supported browser to test it.

(You might need to change your browser settings to allow script from local files before the sample will run.)

If you see the editor but you still don't see the grouped colors, can you let me know what browser and OS you're using?

Attachments:

Attachment	Size
Stand-alone sample for the grouped color button plugin.	202.08 KB

Fri, 06/15/2012 - 01:16

martin k.

Joined: 15/06/2012

Posts: 1

Re: Grouped Color Button

It works.

For those who can't get it to work: I think you need to implement Jquery (see the html file in the sample code)