javascript - JQuery - Paste event, stripping rich text -

i have contenteditable field i'd following. when user pastse rich text field (microsoft word, or otherwise) i'd strip rich text, retain line breaks.

my thinking was: if paste rich text plain <texarea>, removes formatting , retains breaks (created explicit new lines, block level elements). i'd somehow simulate this. in other words, create temporary textarea, intercept paste event, apply textarea, retrieve results, , insert them original content editable field.

however, haven't found way simulate this. if paste contents textarea via jquery, seems retan rich text formatting when try , copy there, original fields

you achieve without needing textarea, processing code in content editable div every time there change in value, , removing tags paragraphs , line breaks.

the idea every time content changes in div (listen input event):

• replace in inner html </p> , <br> non-html tokens (e.g.: [p] , [br] respectively).
• remove html tags (you can .text())
• replace tokens used equivalents (and openings!)
• wrap between <p> , </p>.

here simple demo:

$("#editable").on("input", function() {      $this = $(this);      // replace br , closing p tags special tokens    $this.html($this.html().replace(/\<\/p\>/g,"[p]").replace(/\<br\>/g,"[br]"));      // remove tags, , replace tokens original values    $this.html("<p>" + $this.text().replace(/\[p\]/g, "</p><p>").replace(/\[br\]/g,"<br>") + "</p>");    });

div#editable, div#demo {      border:1px solid gray;      padding:6px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <div contenteditable="true" id="editable"></div>    <h3>demo</h3>  <p>copy code , paste on editable div above:</p>  <div id="demo">    <p>this <b>is</b> <i>a</i> styled paragraph.</p>    <p>&nbsp;</p>    <p>the <span style="font-weight:bold">above paragraph</span> empty.</p>    <p>and new paragraph…<br>with line break!</p>  </div>

you can see running on jsfiddle: http://jsfiddle.net/v5rae96w/

i tried solution ms word , html , works fine. has 1 issue: line breaks p , br (that works nicely ms word , other word processors). if user copies html div (or other block elements cause line break), won't work nicely. if need break block elements, solution may require changes.

---

to fix that, replace block tags p (or div or element want), indicating on regular expression:

$this.html().replace(/(\<\/p\>|\<\/h1\>|\<\/h2\>|\<\/div\>)/gi,"[p]") 

as can see here:

$("#editable").on("input", function() {            $this = $(this);        // replace closing block tags special token      $this.html($this.html().replace(/(\<\/p\>|\<\/h1\>|\<\/h2\>|\<\/h3\>|\<\/h4\>|\<\/h5\>|\<\/h6\>|\<\/div\>)/gi,"[p]").replace(/\<br\>/gi,"[br]"));            // remove tags      $this.html("<p>" + $this.text().replace(/\[p\]/g,"</div><p>").replace(/\[br\]/g,"<br>") + "</p>");    });

div#editable, div#demo {      border:1px solid gray;      padding:6px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div contenteditable="true" id="editable"></div>    <div>      <h3>demo</h3>      <p>copy code , paste on editable div above:</p>      <div id="demo">          <p>this <b>is</b> <i>a</i> styled paragraph.</p>          <p> </p>          <p>the <span style="font-weight:bold">above paragraph</span> empty.</p>          <p>and new paragraph…<br>with line break!</p>      </div>  </div>

or on jsfiddle: http://jsfiddle.net/v5rae96w/1/