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

让我们假设我有一个内容编辑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

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

回答

相关问题