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

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.

.

Answer 2

This is what I did:

$("#red").click(function () {
    $("div").html($("div").html() + "<span style='color:red'></span>");
});

$("#blue").click(function () {
    $("div").html($("div").html() + "<span style='color:blue'></span>");
});

$("div").keypress(function (e) {
    e.preventDefault();
    $("div > span:last-child").text($("div > span:last-child").text() + String.fromCharCode(e.which));
});

Here is the JSFiddle

Answer 3

Please try this

$("#red,#blue").click(function () {
    $new = $("<div>", {
            class: $(this).attr('id'), 
            contenteditable : 'true'
        })
    $("#my-contenteditable-div")
        .append($new)
        .children('div:last').focus();
});

DEMO

Answer 4

Try this one. It works perfectly for me

$("#red").click(function () {
$('#my-contenteditable-div').html($('#my-contenteditable-div').html() + '<span class="red">&nbsp;');
});

$("#blue").click(function () {
$('#my-contenteditable-div').html($('#my-contenteditable-div').html() + '<span class="blue">&nbsp;');
});

Demo Here : https://jsfiddle.net/Saneesharoor/ftwbx88p/

Answer 5

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 () {
       $('<span>')                      
        .attr('contenteditable','true') 
       .attr('class','red') 
        .html('&nbsp;')        
        .appendTo('#my-contenteditable-div')   
});

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

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

<a href="#" id="red">Red Pen</a><br/>
<a href="#" id="blue">Blue Pen</a><br/><br/><br/>
<div contenteditable="true" id="my-contenteditable-div"></div>