Изменения в форматированном contenteditable div

Question

У меня есть следующее: Шаг 1. Редактируемый div, где можно ввести текст. Шаг 2. Я нажимаю на раскрашивание слов, и все слова в редактируемом div завертываются в промежутки, каждый с уникальным идентификатором. Шаг 3. Я могу выбрать 5 разных цветов и щелкнуть по каждому пролету, чтобы сделать его таким цветом (добавив класс в диапазон).

Теперь я могу выбрать сохранение текста, отформатированного в цвете.

Однако у меня также есть кнопка под названием «редактировать текст». Нажав эту кнопку, я смогу снова отредактировать текст.

Но мой вопрос в том, как я могу сделать jquery помню, какие слова у меня есть?

Пример, в котором я пишу:

Я счастливый человек.

Я нажимаю «раскрасить», и редактируемый div становится недоступным для редактирования и отображаются 5 цветов. Я выбираю зеленый цвет и нажимаю на «счастливый». Я нажимаю на красный цвет и нажимаю «человек». теперь у меня есть следующий HTML внутри DIV:

<span id=1>I</span> 
<span id=2>am</span> 
<span id=3>a</span> 
<span id=4 class=green>happy</span> 
<span id=5 class=red>man</span> 

Так что теперь я хочу, чтобы изменить текст (нажав кнопку «Изменить текст» кнопка)

Так я изменить текст:

Я очень счастливый человек

Я затем нажмите кнопку «раскрасить» и будет ожидать:

<span id=1>I</span> 
<span id=2>am</span> 
<span id=3>a</span> 
<span id=6>very</span> 
<span id=4 class=green>happy</span> 
<span id=5 class=red>man</span> 

Как я могу это достичь? Или, если я удалю одно из слов, я хочу, чтобы теги span исчезли?

Я долгое время боролся с этой проблемой, любыми идеями?

Answer 1

Я боюсь, что это будет довольно сложно. Вы могли помнить, основываясь на слове в объекте, но это означало бы, что каждый экземпляр этого слова будет иметь этот цвет. Возможно, что-то вроде этого ...

var wordColors = {}; 
var colorWord = function (word, color) { 
    span.css('color', color); 
    wordColors[word] = color; 
} 
var onEditEnd = function() { 
    // process spans etc 
    var c; 
    for (var i = 0; i < spans.length; ++i) { 
    if (c = wordColors[span.innerHTML]) 
     span.css('color', c); 
    } 
}