Paste plain text into contenteditable.

Override system paste action and use a javascript prompt to paste plain text instead of styled text.

by Erik Woods

HTML

<div contenteditable="true">
  This is an editable element. Try pasting something in it - especially if you have some styled text, which would normally be pasted with the attached styles. For example: try copying and pasting one of the links from my yellow footer right into this box. Observe that it has stripped the styling.
</div>

<footer>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

CSS

div[contenteditable] {
    border: 1px solid #000;
    padding: 10px;
}

div[contenteditable]:hover {
    background: #ff0;
}

footer{
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}

JavaScript

$(document).ready(function(){

 $('[contenteditable]').on("paste",function(event){
      event.preventDefault();
      console.log(window.event.clipboardData);
      var clipboarddata =  window.event.clipboardData.getData('text/plain');    
      console.log("paste value" + clipboarddata);
      $('[contenteditable]').text(clipboarddata);
    });
    
});