可编辑div中文本的颜色更改

Question

这里是演示

我有一个可编辑的 div，希望其具有以下功能：

当我点击红色锚点时，我所写的新文本将为红色，而点击蓝色锚点后，文本应以蓝色开始书写。
注意：当单击蓝色颜色锚点时，以红色编写的内容不应变为蓝色，反之亦然。这意味着在 div 中，我们最终会有以红色和蓝色编写的文本。我可以在 div 中的任何位置编写文本。

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

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

问题：我的代码问题是，当我点击红色时，它会将整个div的颜色都变成红色，蓝色也是一样。

- Amanjot Kaur

---

你需要在光标位置创建一个新的span元素，并为其添加一个类。这个链接可能会有所帮助：http://plugins.jquery.com/caret/ - m4n0

是的，我知道这个问题，我正在努力解决它，但还没有实现。@ManojKumar - Amanjot Kaur

你提供的链接无法打开 @ManojKumar - Amanjot Kaur

请查看此链接：https://github.com/acdvorak/jquery.caret - m4n0

https://dev59.com/TY3da4cB1Zd3GeqPyFCh#31583680 - Rino Raj

Answer 1

你可以针对这些情况使用HTML编辑API。参考链接：https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html

简而言之，使用execCommand和styleWithCSS来实现你想要的效果。styleWithCSS允许你控制execCommand方法将生成CSS还是HTML格式化到文档中。传递true以使用CSS样式而不是生成字体标签。

在下面尝试一下...

示例代码段：

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>

这将生成应用CSS的HTML，如下所示：

<p contenteditable="true">
    this is <span style="color: #f00;">some</span> text
</p>

希望这可以帮到你。

。

- Abhitalks

---

比我的回答好多了...做得很棒...忍不住给你点赞了..+1添加 :) - Rino Raj

谢谢伙计，那帮了很大的忙 :-) @Abhitalks - Amanjot Kaur

Answer 2

请尝试这个。

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

DEMO

的英译中文为：

{{链接1：演示}}

。

- Rino Raj

Answer 3

这是我尝试过的东西。我不确定你想要实现什么。

我的做法： 1. 当按钮被点击时，我创建了可编辑的带有红色和蓝色颜色的span。 2. 对于span使用负边距来减少由' '创建的空间。

查看代码。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>

- Tom

Answer 4

试试这个。对我来说完美地运作。

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

演示在这里：https://jsfiddle.net/Saneesharoor/ftwbx88p/

- SaNeEsH

Answer 5

这是我所做的：

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

这里是 JSFiddle

- Ahs N