Как заменить цвет областей текста в редактируемом элементе содержимого?

Question

Предположим, у меня есть тег pre, который можно редактировать, и кнопка, например:

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

I like cherries

Colorify!

Когда нажата кнопка 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, которая принимала бы индекс символов, длину строки и цвет для этого.

Я видел RTF-редакторы в Javascript и изучил некоторые из их API-интерфейсов, но, похоже, они только позволяют изменять цвет выделенного текста вместо программного изменения цвета произвольных областей текста.

Как программно изменить цвет произвольных областей текста внутри contenteditable элемента?

Answer 1

Это еще одно возможное решение, но, возможно, не совсем то, что вы ищете.Там может быть много последовательных символов одного цвета, так как это совершенно случайно.Я уверен, что это можно улучшить ...

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

Answer 2

Вам нужно будет обернуть каждую букву в промежуток, чтобы раскрасить каждую букву.