如何替換內容可編輯元素中文本區域的顏色？

讓我們假設我有一個內容編輯pre標籤和一個按鈕，像這樣：如何替換內容可編輯元素中文本區域的顏色？

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

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

當按下按鈕colorify，我想文本由字符三種不同的顏色之間交替。它應該是這個樣子：

enter image description here

這是我的本意，在僞的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元素內部任意文本區域的顏色？

來源

2012-02-10 Peter Olson

我不認爲我跟着你...你可以發佈應該發生什麼樣的實際行爲的圖像？ – elclanrs 2012-02-10 03:37:07

@elclanrs請參閱編輯。 – 2012-02-10 03:45:34

您必須將每個字母包裹在一個範圍內才能爲每個字母上色。

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

來源

2012-02-10 03:56:09 mrtsherman

我應該提到這一點，但我有相同的解決方案。有一個錯誤：在一個新行中輸入更多文本。當你變色時，換行符消失。 – 2012-02-10 04:14:08

我一直在努力使它與我的特定解決方案和'contentEditable'元素一起工作，但您是對的，轉換時會忽略新行。好像每個新行都是'div'，我想你可以對每個div進行着色，然後以相同的順序再次追加它們... – elclanrs 2012-02-10 04:33:17

@PeterOlson - 我明白了。這更接近，http://jsfiddle.net/SJqpr/2/。這是第一次，但不是以後的時間。我從另一個SO問題中抓住了一些代碼，它包含了所有帶有跨度的文本節點。 – mrtsherman 2012-02-10 04:33:40

這是另一種更多鈔票的解決方案，但可能不太你在找什麼。由於它是完全隨機的，因此可能會有許多連續的字符具有相同的顏色。我敢肯定，這可以改善......

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

來源

2012-02-10 04:10:07 elclanrs

如何替換內容可編輯元素中文本區域的顏色？

回答

相關問題