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 of red color, and when clicked blue, the text should start writing with blue color.
Note: When click on the blue color anchor, the content written in red color should not get blue and vice versa. This means that in the div, we will have text written in red and blue color at last. I can write text anywhere in the div.

$("#red").click(function () {
    $("div").addClass("red");
    $("div").removeClass("blue");
});

$("#blue").click(function () {
    $("div").addClass("blue");
    $("div").removeClass("red");
});

Problem: The problem in my code is that when i click on red, it changes all the color of the div in red and same as of blue.

Answer 1

You could make use of HTML editing APIs for such use-cases. Reference here: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html

In short, use the execCommand along with styleWithCSS to achieve what you want. styleWithCSS will let you control whether CSS or HTML formatting should be generated by the execCommand method into the document. Pass true to use the CSS styling instead of generating the font tag.

Try it out below...

Example Snippet:

var 
    red = document.getElementById("red"),
    blue = document.getElementById("blue"),
    reset = document.getElementById("reset")
;

red.addEventListener("click", function() { setColor("#f00"); });
blue.addEventListener("click", function() { setColor("#00f"); });
reset.addEventListener("click", function() { setColor("#000"); });

function setColor(color) {
    document.execCommand('styleWithCSS', false, true);
    document.execCommand('foreColor', false, color);
}

<a href="#" id="red">Red</a> | <a href="#" id="blue">Blue</a> | <a href="#" id="reset">Reset</a> | 
<p contentEditable="true" id="ce">this is some text</p>

This will generate HTML with CSS applied, like this:

<p contenteditable="true">
    this is <span style="color: #f00;">some</span> text
</p>

Hope that helps.

.