Change color of the text in contenteditable div

Question

Demo is here

I have a contenteditable div. I want the functionality in the div as follows:

When I click on red anchor tag, the new text that I will write will be

Answer 1

Here is something I tired. I am not sure as to what you are trying to achieve.

What I did: 1. What I did is created editable span with red and blue colour when the button was clicked. 2. negative margin for span to reduce the space created by ' '

Check the code. FIDDLE

$("#red").click(function () {
       $('')                      
        .attr('contenteditable','true') 
       .attr('class','red') 
        .html(' ')        
        .appendTo('#my-contenteditable-div')   
});

$("#blue").click(function () {
   $('')                      
        .attr('contenteditable','true') 
       .attr('class','blue') 
        .html(' ')        
        .appendTo('#my-contenteditable-div')   
});

.red
{
    color:red;
}
.blue
{
    color:blue;
}
div
{
    height:100px;
    border:1px solid red;
}
span{margin-left:-4px;}

Red Pen

Blue Pen