コンテンツ編集可能な要素のテキスト領域の色をどのように置き換えますか？

Question

のは、私はこのように、コンテンツの編集可能なpreタグとボタンがあるとしましょう：colorifyボタンを押すと

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

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

が、私はテキストは文字によって3つの異なる色の間で交互にしたいと思います。

これは私の意図は、ある疑似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要素内の任意のテキスト領域の色をプログラムで変更するにはどうすればよいですか？

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