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.

Chryselephantine

You need to create a new span element at the cursor position and add a class to it. This might help: plugins.jquery.com/caret – Feeze

Yes, i know it and I m working on it but not able to implement it. @ManojKumar – Chryselephantine

The link you gave doesnot work @ManojKumar – Chryselephantine

Check this: github.com/acdvorak/jquery.caret – Feeze

https://mcmap.net/q/1267312/-change-color-of-the-text-in-contenteditable-div – Metasomatism

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.

.

Potsherd

Much better answer than mine...Great work... Coudn't resist upvoting .. +1 added :) – Metasomatism

Thanks buddy. That helped a lot :-) @Potsherd – Chryselephantine

Answer 2

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

Metasomatism

Answer 3

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>

Kamikamikaze

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/

Algernon

Answer 5

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

Magna