This button implements a color palette and displays it in a pop-up for the user to choose among predefined colors. In addition to coloring text, it can also be modified to insert other CSS color properties such as background-color.

Library files:

  1. bue.style.js (Not required for BBcode)
  2. bue.colorbox.css

Button code:

js:
var
htmlTag = 'span';// HTML tag to wrap the text
var cssProp = 'color';// CSS property to populate
var palette = '0369cf';//hex palette containing chars from 0123456789abcdef
var len = palette.length;
var
links = '';
for (var
color, i=0; i < len; i++) for (var j=0; j < len; j++) for (var k=0; k < len; k++) {
   
color = '#' + palette.charAt(j) + palette.charAt(i) + palette.charAt(k);
   
links += '<a href="#" title="'+ color +'" style="background-color: '+ color +'"></a>';
}
links = BUE.$html(links).click(function(){
 
E.toggleStyle(cssProp, this.title, htmlTag);
  return
false;
});
var
content = $('<div class="bue-color-box"></div>').append(links);
E.quickPop.open(content, 'slideDown');

BBCode button code:

js:
var
bbcTag = 'color';// BBCode tag to populate
var palette = '0369cf';//hex palette containing chars from 0123456789abcdef
var len = palette.length;
var
links = '';
for (var
color, i=0; i < len; i++) for (var j=0; j < len; j++) for (var k=0; k < len; k++) {
   
color = '#' + palette.charAt(j) + palette.charAt(i) + palette.charAt(k);
   
links += '<a href="#" title="'+ color +'" style="background-color: '+ color +'"></a>';
}
links = BUE.$html(links).click(function(){
 
E.tagSelection('[' + bbcTag + '=' + this.title + ']', '[/' + bbcTag + ']');
  return
false;
});
var
content = $('<div class="bue-color-box"></div>').append(links);
E.quickPop.open(content, 'slideDown');

Custom CSS for the color box:

<style type="text/css">
  .
bue-color-box {
   
width: 288px;
  }
  .
bue-color-box a {
   
display: inline-block;
   
padding: 6px;
   
margin: 0 0 1px 2px;
   
border: 1px outset #000;
   
text-decoration: none !important;
   
font-size: 1px;
  }
  .
bue-color-box a:hover {
   
border-color: #aaa;
   
border-style: inset;
  }
</
style>

this is working fine with

this is working fine with firefox and other but not woking with IE :(

help pls.

hah saw this too late.. wrote

hah saw this too late.. wrote something similar based on the documentation, with 9 colors (the same used in google image search)

I prefered working with "real" colornames instead of hex codes.
Keep in mind I'm using BBCODE

[CODE]
js:
var colors = [
['img', '', {'src': '/sites/default/modules/bueditor/icons/red.png'}, 'red'],//better to set also the width & height & alt attributes
['img', '', {'src': '/sites/default/modules/bueditor/icons/orange.png'}, 'orange'],
['img', '', {'src': '/sites/default/modules/bueditor/icons/yellow.png'}, 'yellow'],
['img', '', {'src': '/sites/default/modules/bueditor/icons/green.png'}, 'green'],//line break added after 4th
['img', '', {'src': '/sites/default/modules/bueditor/icons/teal.png'}, 'teal'],
['img', '', {'src': '/sites/default/modules/bueditor/icons/blue.png'}, 'blue'],
['img', '', {'src': '/sites/default/modules/bueditor/icons/purple.png'}, 'purple'],
['img', '', {'src': '/sites/default/modules/bueditor/icons/pink.png'}, 'pink'],//br after 8th
['img', '', {'src': '/sites/default/modules/bueditor/icons/white.png'}, 'white'],
['img', '', {'src': '/sites/default/modules/bueditor/icons/gray.png'}, 'gray'],
['img', '', {'src': '/sites/default/modules/bueditor/icons/black.png'}, 'black'],
['img', '', {'src': '/sites/default/modules/bueditor/icons/brown.png'}, 'brown']
];
E.tagChooser(colors, {wrapEach: '', wrapAll: 'div'});
$('a.choice-link', E.quickPop).unbind('click').each(function(i, a) {
$(a).click(function() {
E.tagSelection('[color='+ colors[i][3] +']', '[/color]').focus();
return false;
});
});
[/CODE]

Code could be buggish but it works fine for me.
Here's the images with colors: http://www.mediafire.com/file/cjt9kyzvy3cr23a/colors.zip

Thisneeds to get 12 images,

Thisneeds to get 12 images, which means 12 extra GETs to render the editor and hence an overkill IMHO.

How to implement this?

How to implement this?

I went to Home » Administer »

I went to

Home » Administer » Site configuration » BUEditor

and added the js file.
I also added the .css snippet to my theme's style.css.
Now the color palette button appears but it has no effect.
It would be great if you add some brief implementation instructions.

Thanks

Under supervision of Drupal :)