Add span on selected text in a contenteditable div

I want the user to be able to select the text in the div and add the <span style="color: #ff3300;"> to it.

Example code @ http://jsfiddle.net/SkDA8/1/

Hover over to div and clic开发者_运维问答k on the missing picture to display the color-swatch

Thanks for your help!

PS

I want it to work in all modern browsers.

I was about to respond to your post to the Rangy group about this, but I'll respond here too.

This is one task that is achievable using document.execCommand():

document.execCommand("ForeColor", false, "#ff3300")

I've created an update to your jsfiddle: http://jsfiddle.net/timdown/SkDA8/3/

Not exactly certain what you are trying to do. Here is an updated jsFiddle that gets the value of the colored swatch that is clicked and updates the header color.

http://jsfiddle.net/SkDA8/4/

Hope this helps.

Bob