title: Strip HTML formatting from contenteditable div but preserve line breaks on paste?
body: <p>I currently have a content editable div which I use as an editor but I'm looking to strip html (not including <code>&lt;br&gt;</code> tags) on paste.</p>
  
  <p>At the moment I have another div <code>&lt;div class="hiddendiv common editor"&gt;&lt;/div&gt;</code> this one which collects all text and data added to the <code>contenteditable</code> div in order to determine height of the contenteditable div.</p>
  
  <p>I've become confused and unsure how I will do this.</p>
  
  <p>My Question is: How do I strip html formatting (not including <code>&lt;br&gt;</code> tags) whilst inserting text at the cursor caret on paste with jQuery?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div contenteditable='true' id="textarea" class="editor plain-box large-box textarea text common text-content-input quicksand color-dark-grey" data-text="Start typing..."&gt;&lt;/div&gt;
  
  &lt;div class="hiddendiv common editor"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
      sel = window.getSelection();
      if (sel.getRangeAt &amp;&amp; sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();
        var el = document.createElement("div");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ((node = el.firstChild)) {
          lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);
  
        if (lastNode) {
          range = range.cloneRange();
          range.setStartAfter(lastNode);
          range.collapse(true);
          sel.removeAllRanges();
          sel.addRange(range);
        }
      }
    } else if (document.selection &amp;&amp; document.selection.type != "Control") {
      document.selection.createRange().pasteHTML(html);
    }
  }
  
  $('#textarea').on("paste", function() {
      var textarea = $('#textarea').html();
      var hidden_div = $('.hiddendiv').html(textarea);
      var plain_text = hidden_div.text();
      $('#textarea').pasteHtmlAtCaret(plain_text);
  });
  
  var txt = $('#textarea'),
      hiddenDiv = $(document.createElement('div')),
      content = null;
  
  txt.addClass('txtstuff');
  hiddenDiv.addClass('hiddendiv common editor');
  
  $('body').append(hiddenDiv);
  
  txt.on('keyup input propertychange', function () {
  
      content = $(this).html();
  
      content = content.replace(/\n/g, '&lt;br&gt;');
      hiddenDiv.html(content + '&lt;br&gt;');
  
      $(this).css('height', hiddenDiv.height());
  
  });
  </code></pre>