JSFiddle - React, Tailwind, and code Playground
by RenatoRamosPuma
September 20, 2019
HTML
<article contenteditable="true">
Paste Here
</article>
<section>
<div>
<span>
<h1>select its text and paste</h1>
<h2>Title Example</h2>
<p>parrafe</p>
<p>parrafe</p>
<p>parrafe</p>
<br/>
New Line
<br/>
Other Line
</span>
</div>
</section>
CSS
article{
border: 1px solid SteelBlue;
}
section{
margin: 1em;
padding: 1em;
border: 1px dashed Red;
}
JavaScript
$('[contenteditable]').on('paste', function(e) {
e.preventDefault();
var text = '';
if (e.clipboardData || e.originalEvent.clipboardData) {
text = (e.originalEvent || e).clipboardData.getData('text/plain');
} else if (window.clipboardData) {
text = window.clipboardData.getData('Text');
}
text = text.replace(/<[^>]*>?/gm, '');
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
});
$('[contenteditable]').keydown(function(e) {
if (e.keyCode === 13) {
document.execCommand('insertHTML', false, '<br><br>');
return false;
}
});