JSFiddle - React, Tailwind, and code Playground

by Abid Shaik

HTML

<div id="TextMsgTemplate" contenteditable="true">

</div>
<br>
<input id="InptGetText" type="button" value="Get Text Only">

<div id="output">

</div>

CSS

.TxtPlaceHolder{
	font-weight:bold;
	font-style: italic;
	background-color:yellow;
}

#TextMsgTemplate{
	width: 500px;
	height:100px;
	border: 1px solid;
	padding:10px;
}

JavaScript

var textCopy = "<span class='TxtPlaceHolder'>Contact Name</span>  this is <span class='TxtPlaceHolder'>Your Name</span> from <span class='TxtPlaceHolder'>Company</span>. Thanks for inquiring on our website. Let me know if you’re available for a quick chat."; 

$("#TextMsgTemplate").html(textCopy);

$(".TxtPlaceHolder").click(function(){
 $(this).replaceWith("<span>&nbsp;</span>");
});

$("#InptGetText").click(function(){
 $("#output").html($("#TextMsgTemplate").text());
});