如何替换内容可编辑元素中文本区域的颜色？答案

【问题标题】：How do you replace the color of regions of text in a content editable element?如何替换内容可编辑元素中文本区域的颜色？
【发布时间】：2012-02-10 12:28:16
【问题描述】：

假设我有一个内容可编辑的pre 标签和一个按钮，如下所示：

<pre id="input" contenteditable>
hello world!
how is everything today?

I like cherries
</pre>
<button id="colorify">Colorify!</button>

按下colorify 按钮时，我希望文本按字符在三种不同颜色之间交替显示。它应该看起来像这样：

这是我的意图，用伪Javascript表达：

$("#colorify").click(function() {
  var input = $("#input"), text = input.text(),
   colors = ["#FF0000", "#00FF00", "#0000FF"];
  for (var i = 0; i < text.length; i++) {
    input.changeColorOfRange(i, 1, colors[i % 3]);
  }
});

很遗憾，没有changeColorOfRange 函数可以接受字符索引、字符串长度和颜色来执行此操作。

我在 Javascript 中看到了 RTF 编辑器，并且我研究了他们的一些 API，但它们似乎只允许更改所选文本的颜色，而不是通过编程方式更改任意文本区域的颜色。

如何以编程方式更改 contenteditable 元素内任意文本区域的颜色？

【问题讨论】：

我不认为我关注你...你能发布一张应该发生的实际行为的图片吗？

标签： javascript jquery html contenteditable

【解决方案1】：

您必须将每个字母包装在一个跨度中以对每个字母着色。

http://jsfiddle.net/SJqpr/1/

$("#colorify").click(function() {
    var input = $("#input"),
        text = input.text(),
        colors = ["#FF0000", "#00FF00", "#0000FF"];

    $('#input').html('');
    for (var i = 0; i < text.length; i++) {
        var $span = $('<span>' + text[i] + '</span>').css('color', colors[i % 3]);
        $('#input').append($span);
    }
});

【讨论】：

我应该提到这一点，但我有相同的解决方案。有一个错误：在新行的框中输入更多文本。着色时，换行符消失。
我一直在尝试使其与我的特定解决方案和 contentEditable 元素一起使用，但你是对的，转换时会忽略新行。似乎每个新行都是div，我想您可以为每个 div 着色，然后以某种方式以相同的顺序再次附加它们...
@PeterOlson - 我明白了。这更接近，jsfiddle.net/SJqpr/2。它第一次有效，但随后无效。我从另一个 SO question 中获取了一些使用 span 包装所有文本节点的代码。

【解决方案2】：

这是另一种可能的解决方案，但可能不是您想要的。由于它是完全随机的，因此可能有许多具有相同颜色的连续字符。我相信这可以改进......

html：

<p id="input" contentEditable></p><br/>
<button>Colorify</button>

js:

var colorify = function(str) {

    var chars = str.split(''),
        colors = ['#ff0000', '#00ff00', '#0000ff'],
        spans = '';

    $.each(chars, function(idx, value){
        spans += '<span style="color:' + 
            colors[Math.floor(Math.random() * colors.length)] +
            '">'+ value +'</span>';
    });

    $('#input').empty().append(spans);
};

$('button').click(function(){ colorify($('#input').text()); });

【讨论】：