Posted by symeon.mattes on June 18, 2009 at 7:09am
Jump to:
| Project: | BUEditor |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
Hi there,
I have used bueditor for quite long with a great success. Though I have a problem every time I have to use more advanced buttons, e.g. color palette. For this example I had to create my own palette which I don't think is so great but for basic colors, it works. I attach the code, which though needs improvement. The only thing that somebody has to do is to replace the old bueditor>library>default_buttons_functions.js with the attached one, and call the "create_palette()" function.
I know that I must not change the modules, but I don't have a so advanced level in drupal. I would be obliged for any suggestions.
| Attachment | Size |
|---|---|
| default_buttons_functions.js.txt | 20.65 KB |
Comments
#1
function set_color(id)
{
var sel = BUE.active.getSelection();
BUE.dialog.close();
BUE.active.replaceSelection('<span style="color:#'+id+'>'+sel+</span>');
}
BUE.active.replaceSelection('<span style="color:#'+id+' " >'+sel+</span>');
#2
Why have you done this?
#3
Check this out.
#4
Hi, I have a quick question. Does this work if you have Filtered HTML and BBCode filters turned on, but have Full HTML turned off? If not, can you tell me how to make/import a text color button that will?
Also, I am unsure how to import this button. I'm really new to drupal, and I can see how to use the button editor to add a button, or to import using a csv or paste in code, but I am not sure how to translate what I see on your page to a useable import for my editor.
Thanks for your help!
#5
You don't need bue.style.js if you want to insert BBCode.
Paste this button code to the "Content" field of your new button(see at the bottom of button list of your editor)
js: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('[color=' + this.title + ']', '[/color]');
return false;
});
var content = $('<div class="my-color-box"></div>').append(links); //my-color-box will need some CSS
E.quickPop.open(content, 'slideDown');
Don't forget to add the custom CSS to your theme's style.css
.my-color-box {width: 288px;
}
.my-color-box a {
display: inline-block;
padding: 6px;
margin: 0 0 1px 2px;
border: 1px outset #000;
text-decoration: none !important;
font-size: 1px;
}
.my-color-box a:hover {
border-color: #aaa;
border-style: inset;
}
#6
Works great, and I grabbed a little graphic to work as a button off of a google icon search. Thanks so much, this bar will stop my users' complaints about having to manually type codes for this stuff! :)
#7
Automatically closed -- issue fixed for 2 weeks with no activity.