Change text color in contenteditable div
I have a contenteditable div. I want functionality in a div like this:
When I click on the red anchor tag, the new text I will be writing will be red, while when I click on the blue text, the text should start in blue.
Note. When clicking on a blue colored icon, the content written in red should not be blue and vice versa. This means that in the div we will have text written in red and blue. 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 the red color, it changes the whole div color to red and the same as blue.
source to share
You can use HTML editing APIs for such use cases. Link here: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html
In short, use execCommand
together with styleWithCSS
to achieve what you want. styleWithCSS
will allow you to control whether CSS or HTML formatting is generated by the execCommand method in the document. Pass true
to use CSS styles instead of generating the font tag.
Try below ...
Snippet example :
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 using CSS like:
<p contenteditable="true">
this is <span style="color: #f00;">some</span> text
</p>
Hope it helps.
...
source to share
That's what I'm tired of. I'm not sure what you are trying to achieve.
What I did: 1. Clicking the button creates an editable range with red and blue colors. 2. negative margin for the range to reduce the space created by "
"
Check the code. FIDDLE
$("#red").click(function () {
$('<span>')
.attr('contenteditable','true')
.attr('class','red')
.html(' ')
.appendTo('#my-contenteditable-div')
});
$("#blue").click(function () {
$('<span>')
.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;}
<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>
source to share
Try it. It works great for me.
$("#red").click(function () {
$('#my-contenteditable-div').html($('#my-contenteditable-div').html() + '<span class="red"> ');
});
$("#blue").click(function () {
$('#my-contenteditable-div').html($('#my-contenteditable-div').html() + '<span class="blue"> ');
});
Demo here: https://jsfiddle.net/Saneesharoor/ftwbx88p/
source to share
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));
});
source to share