Javascript 更改contenteditable div中文本的颜色

我有一个contenteditable div。我希望div中的功能如下所示：

当我单击红色锚定标记时，我将写入的新文本将为红色，而当单击蓝色时，文本将开始以蓝色写入。
注意：单击蓝色锚定时，以红色书写的内容不应变为蓝色，反之亦然。这意味着在div中，我们将最终以红色和蓝色书写文本。我可以在div的任何地方写文本

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

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

---

问题：我的代码中的问题是，当我单击红色时，它会将div的所有颜色更改为红色，与蓝色的颜色相同。

这里有一些我很累的东西。我不知道你想达到什么目的

我所做的： 1.我所做的是在点击按钮时用红色和蓝色创建可编辑范围。 2.span的负边距，以减少由“

”创建的空间

检查代码

$（“#红色”）。单击（函数（）{
$('')                      
.attr（'contenteditable'，'true'）
.attr（'class'，'red'）
.html（“”）
.appendTo（“#我的内容可编辑div”）
});
$（“#蓝色”）。单击（函数（）{
$('')                      
.attr（'contenteditable'，'true'）
.attr（'class'，'blue'）
.html（“”）
.appendTo（“#我的内容可编辑div”）
});
.red
{
颜色：红色；
}
蓝色
{
颜色：蓝色；
}
div
{
高度：100px；
边框：1px纯红；
}
span{左边距：-4px；}






请试试这个

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

$（“#红，#蓝”）。单击（函数（）{
$new=$（“”{
类：$（this.attr（'id'），
contenteditable:'真'
})
$（“#我的内容可编辑div”）
.append（$new）
.children（'div:last'）.focus（）；
});

您可以将HTML编辑API用于此类用例。此处参考：

简而言之，使用
execCommand
和
styleWithCSS
来实现您想要的功能
styleWithCSS
将允许您控制execCommand方法是否应在文档中生成CSS或HTML格式。传递
true
以使用CSS样式，而不是生成字体标记

在下面尝试一下

示例代码段：


var
红色=document.getElementById（“红色”），
蓝色=document.getElementById（“蓝色”），
重置=document.getElementById（“重置”）
;
red.addEventListener（“单击”，函数（）{setColor（#f00”）；}）；
blue.addEventListener（“单击”，函数（）{setColor（#00f”）；}）；
addEventListener（“单击”，函数（）{setColor（#000”）；}）；
函数setColor（颜色）{
document.execCommand（'styleWithCSS'，false，true）；
document.execCommand（'foreColor'，false，color）；
}
| | |
这是一些文本
试试这个。它对我非常有效

$("#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;');
});

$（“#红色”）。单击（函数（）{
$（“#我的内容可编辑div'）.html（$（“#我的内容可编辑div'）.html（）+”）；
});
$（“#蓝色”）。单击（函数（）{
$（“#我的内容可编辑div'）.html（$（“#我的内容可编辑div'）.html（）+”）；
});

此处演示：
我就是这么做的：

$("#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));
});

$（“#红色”）。单击（函数（）{
$（“div”）.html（$（“div”）.html（）+）；
});
$（“#蓝色”）。单击（函数（）{
$（“div”）.html（$（“div”）.html（）+）；
});
$（“div”）。按键（功能（e）{
e、 预防默认值（）；
$（$div>span:last child”）.text（$（$div>span:last child”）.text（）+String.fromCharCode（e.which））；
});

您需要在光标位置创建一个新的span元素，并向其中添加一个类。这可能会有帮助：是的，我知道它，我正在研究它，但无法实现它@Manojkumarth您提供的链接不起作用@ManojKumarCheck：比我的答案好得多…做得好。。。无法抗拒投票+1加上：）谢谢你，伙计。这帮了大忙：-）@Abhitalks