JSFiddle - React, Tailwind, and code Playground
HTML
<div class="text-container">
Lorem ipsum dolor sit amet, <span class="fs-bi">consectetur</span> adipiscing elit. <span class="fs-i" >Nam imperdiet</span> libero sed lacus egestas tempor et ornare risus. <span class="fs-b" >Mauris eget </span>scelerisque felis, id imperdiet tellus. <a href="#">asdf asdf asdf</a>
</div>
<div class="paste-area" id="pasteArea" contenteditable="true" ></div>
CSS
.text-container {
padding: 10px;
margin-bottom: 20px;
background-color: yellow;
color: #000;
}
.paste-area {
min-height: 40px;
background-color: #ddd;
border: 1px dashed #999;
position: relative;
}
.paste-area.loading {
opacity: 0.4;
/* background: url("../img/ajax-loader.gif") no-repeat center center #ddd; */
}
.fs-b, .fs-bi {
font-weight: bold;
}
.fs-i, .fs-bi {
font-style: italic;
}
JavaScript
var pasteArea = document.getElementById("pasteArea");
var fWeight = document.getElementById("fWeight");
var fStyle = document.getElementById("fStyle");
// Event Listener
pasteArea.addEventListener('paste', function(e) {
e.preventDefault();
var clipboardData = {},
rDataText,
rDataHTML;
if(e.clipboardData) {
// Mozilla & Chrome
clipboardData = e.clipboardData;
rDataHTML = clipboardData.getData('text/html');
rDataPText = clipboardData.getData('text/plain');
} else if( window.clipboardData ) {
// IE9
clipboardData = window.clipboardData;
try {
rDataHTML = clipboardData.getData('Html');
} catch(e) {
console.log(e);
}
rDataPText = clipboardData.getData('Text');
}
if (rDataHTML && rDataHTML.trim().length != 0) {
console.log('data in clipboard is html');
HtmlHandler(rDataHTML);
return false;
}
if (rDataPText && rDataPText.trim().length != 0) {
console.log('data in clipboard is plain text');
PlainTextHandler(rDataPText);
return false;
}
}, false);
// Remove Line Break In PlainText
function PlainTextHandler(pText) {
pText.replace(/\r?\n|\r/, " ");
insertNode( document.createTextNode(pText) )
pasteArea.removeClassName('loading');
}
// Remove Unwanted Tag and Attributes
function HtmlHandler(htmlStr) {
var wrap = document.createElement("span"); // for ease of finding elements appended to a span
wrap.innerHTML = htmlStr;
var allNodes = wrap.getElementsByTagName('*'); // get all elements
var allNodesLen = allNodes.length;
pasteArea.addClassName('loading'); // loading gif
function formatHtml(elem, complete) {
var flag_italic = false;
var flag_weight = false;
var fontStyle;
var fontWeight;
console.log(elem)
if (elem.nodeType == 1) { //...