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.
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');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');<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