Change color of the text in contenteditable div
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.
.