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

假设我有一个内容可编辑的

pre

标记和一个按钮，如下所示：

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

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

不幸的是，没有接受字符索引、字符串长度和颜色的

changeColorOfRange

函数

我看过Javascript中的RTF编辑器，也看过它们的一些API，但它们似乎只允许更改选定文本的颜色，而不是通过编程更改任意文本区域的颜色

---

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

您必须将每个字母包装在一个范围内，才能为每个字母添加颜色

$（“#着色”）。单击（函数（）{
变量输入=$（“#输入”），
text=input.text（），
颜色=[“FF0000”、“00FF00”、“0000FF”]；
$（'#input'）.html（''）；
对于（变量i=0；i

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

html:

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

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

着色

js:

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

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

var colorify=function（str）{
var chars=str.split（“”），
颜色=['#ff0000'、'#00ff00'、'#0000ff']，
跨度=''；
$.each（字符、函数（idx、值）{
跨度+=''+值+''；
});
$（'#input'）.empty（）.append（span）；
};
$（'button'）。单击（函数（）{colorify（$（'input'））.text（）；}）；

我想我没听懂你的意思……你能发布一张实际行为的图片吗？我应该提到这一点，但我有相同的解决方案。有一个错误：在框中的新行上键入更多文本。当您着色时，换行符消失。我一直在尝试使用我的特定解决方案和

contentEditable

元素使其工作，但您是对的，转换时新行将被忽略。似乎每一行都是一个

div

，我想你可以给每个div加上颜色，然后以同样的顺序再加上它们…@PeterOlson-我明白了。这更近了。它在第一次工作时起作用，但在以后的时间内不起作用。我从另一个问题抓取了一些代码，用跨距包装所有文本节点。