A function to put a text in div in several lines
<p>I want to implement an area to realise 3 essential tasks:</p>

<ol>
<li>people can edit the text manually;</li>
<li>we could build a (JavaScript) function to put a text and display it in several lines with possible white spaces;</li>
<li>we could build a (JavaScript) function to color a part of the text given a position + a color. As a result, we may see different parts of the text in different colours.</li>
</ol>

<p>I have checked some existing questions, it seems that <code>textarea</code> can NOT color a part of the text, which is a pity.</p>

<p>Someone suggests to use <code>&lt;div contentEditable&gt;</code>. I then implement this <a href="http://jsbin.com/futeho/11/edit?html,output" rel="nofollow">JSBin</a>.</p>

<p>So my first trouble is how to build the function to put a text in several lines. Unlike <code>textarea</code>, <code>$('#ce span').text("line1 \n    line2\n       line3")</code> ignores <code>\n</code> and white spaces, and still displays them in one line.</p>

<p>Could anyone help?</p>

<p>Additionally, Does anyone know any other solutions (that are not too complexe and realise the 3 essential tasks above, eg, in <code>JQuery</code>) than <code>&lt;div contentEditable&gt;</code>?</p>