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

Question

我们假设我有一个内容可编辑的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，但它们似乎只允许更改所选文本的颜色，而不是以编程方式更改任意文本区域的颜色。

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

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

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