title: Editable DIV Add some text at cursor
body: <p>I have added a button to insert some text from a textarea to an editable DIV using this function found on stakoverflow.</p>
  
  <pre><code>function insertAtCursor(){
      document.getElementById('myInstance1').focus() ; // DIV with cursor is 'myInstance1' (Editable DIV)
      var sel, range, html;
      var text = document.getElementById('AreaInsert').value ; // Textarea containing the text to add to the myInstance1 DIV
      if (window.getSelection) {
          sel = window.getSelection();
          if (sel.getRangeAt &amp;&amp; sel.rangeCount) {
              range = sel.getRangeAt(0);
              range.deleteContents();
              range.insertNode( document.createTextNode(text) );
          }
      } else if (document.selection &amp;&amp; document.selection.createRange) {
          document.selection.createRange().text = text;
      }
  }
  </code></pre>
  
  <p>With Internet Explorer using <code>document.selection.createRange().text</code> it works fine for line breaks.
  With Firefox and Chrome, line breaks of the textarea are not respected, all the text inserted to the editable div from the textarea is on only one line.</p>
  
  <p>How to modify insertAtCursor() to make it works for line breaks with Firefox and Chrome ?</p>