Changes to formatted contenteditable div
<p>I have the following
Step 1. An editable div where one can type some text. 
Step 2. I click on colorize words and all of the words in the editable div are wrapped in spans each with a unique id. 
Step 3. I can select 5 different colours and click on each span to make it that colour (adding a class to the span). </p>

<p>Now i can choose to save the colour formatted text.</p>

<p>However i also have a button called "edit text". Clicking this button i'm able to edit the text again. </p>

<p>But my question is then how do i make jquery remember which words i have coloured?</p>

<p>An example where i write:</p>

<p>I am a happy man. </p>

<p>I click "colorize" and the editable div becomes non-editable and the 5 colours are shown. 
I select a green color and click on "happy". 
I click on a red color and click on "man". 
I now have the following html inside the div:</p>

<pre><code> &lt;span id=1&gt;I&lt;/span&gt;
 &lt;span id=2&gt;am&lt;/span&gt;
 &lt;span id=3&gt;a&lt;/span&gt;
 &lt;span id=4 class=green&gt;happy&lt;/span&gt;
 &lt;span id=5 class=red&gt;man&lt;/span&gt;
</code></pre>

<p>So now i want to edit the text (clicking the "edit text" button) </p>

<p>So i alter the text to:</p>

<p>I am a very happy man</p>

<p>I then click "colorize" and would expect:</p>

<pre><code> &lt;span id=1&gt;I&lt;/span&gt;
 &lt;span id=2&gt;am&lt;/span&gt;
 &lt;span id=3&gt;a&lt;/span&gt;
 &lt;span id=6&gt;very&lt;/span&gt;
 &lt;span id=4 class=green&gt;happy&lt;/span&gt;
 &lt;span id=5 class=red&gt;man&lt;/span&gt;
</code></pre>

<p>How can i achieve this?
Or if i delete one of the words i want the span tags to go away?</p>

<p>I've been struggling quite some time with this issue, any ideas?</p>
