Question

我有一个满足的div。我希望div中的功能如下：

当我点击红色锚标签时，我要写的新文本将是红色，当点击蓝色时，文本应该开始用蓝色书写。
注意：单击蓝色锚点时，用红色书写的内容不应该变为蓝色，反之亦然。这意味着在div中，我们最终会有红色和蓝色的文字。我可以在div中的任何地方写文字。

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

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

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

Answer 1

您可以针对此类用例使用HTML编辑API。参考此处：https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html

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

在下面尝试一下......

示例代码段 ：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

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

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

希望有所帮助。

Answer 2

请尝试此

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

DEMO

Answer 3

这是我厌倦的事情。我不确定你想要达到的目的。

我做了什么： 1.单击按钮时，我所做的是用红色和蓝色创建可编辑的跨度。 2.跨度的负余量，以减少由 ＆＃39;

创建的空间

检查代码。 FIDDLE

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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/

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));
});

Here is the JSFiddle

更改contenteditable div

5 个答案: