Skip to content

Changing Background color of multiple text lines in a "full" area #262

kshitizshankar opened this Issue Aug 3, 2012 · 1 comment

2 participants


If you select multiple lines and try to change the background color it doesn't work.
Also, just to mention that there is no direct method for changing the background color of an entire box. I think it would be a good feature and would make things more simpler for the user.


We wrote our own custom background color support, which is spotty, but better than the alternatives.

contentEditable supports two commands for this, backcolor and hilitecolor.

backcolor sets the entire div background in IE, and in other browsers it works like hilitecolor.. super inconsistent, and not good.

hilitecolor is a better solution for selecting some text and wrapping that in a span with a background color, but the different browsers use different styles for this.. some use rgb instead of hex, and this causes a problem with displaying it in IE6-8 --

Now that you know the caveats, you can feel free change these behaviors yourself using the configuration.. This is all covered in the documentation, but here's a refresher.

If you want to use the native backcolor or hilitecolor, in the behaviors section of the configuration add:

backColor: function(selection, options) { this.document.execCommand('hilitecolor', false, options.value) }
- or -
backColor: function(selection, options) { this.document.execCommand('backcolor', false, options.value) }

If you want to set the background color of the whole div, again, in the behaviors section of the configuration add:

  backColor: function(selection, options) { this.element.css({backgroundColor: options.value}).attr('data-background-color', options.value) }

Notice how we're also setting a data attribute? Data attributes are serialized on save if you specify you want them.. so find the regions/dataAttributes configuration and add 'background-color' to the array there. It'll then get serialized on save (in the data object), so you can store that information and use it again when you render that region.

There's even more you can do, like create a different button for setting the background color of the entire region, displaying the palette and then firing a different action (like 'containerBackColor'), but it's good for you to read the documentation -- let me know if you see anything that's missing in it. =)

@jejacks0n jejacks0n closed this Aug 21, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.