JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<body onload="initDoc();">
<div id="bold" class="BoldBtn">Bold</div>
<div id="copy"class="BoldBtn">Copy</div>
<div id="past" class="BoldBtn">Past</div>    
<div id="CntE" class="Veditor" contenteditable="true">
    
</div>

CSS

.Veditor
{
    background-color: #e8e8e8;
    width: 700px;
    height: 400px;
    color: #000;
    
}

.BoldBtn{
    width: 100px;
    height: 20px;
    background-color: #e8e8e8;
    border: 1px solid gray;
    margin-bottom: 20px;
    text-align: center;
    color: navy;
    cursor: pointer;
}

JavaScript

var oDoc, sDefTxt;

$('#bold').on('click','', function(){
    //document.execCommand('bold',false,null);
    formatDoc('bold',null);
    //document.execCommand("insertHTML", false, "<span class='BoldBtn'>"+ 'document.getSelection()' +"</span>");
});

$('#copy').on('click','', function(){
    //document.execCommand('bold',false,null);
    formatDoc('copy');
});

$('#past').on('click','', function(){
    //document.execCommand('bold',false,null);
    formatDoc('past');
});

initDoc = function () {
  oDoc = document.getElementById("CntE");
  sDefTxt = oDoc.innerHTML;
  ///if (document.compForm.switchMode.checked) { setDocMode(true); }
}

validateMode = function () {
  if (!document.compForm.switchMode.checked) { return true ; }
  alert("Uncheck \"Show HTML\".");
  oDoc.focus();
  return false;
}

function formatDoc(sCmd, sValue) {
    if (sValue == null)
    {
        sValue = document.getElementById("CntE").innerHTML;
    }
  //if (validateMode()) { 
      document.execCommand(sCmd, false, sValue); oDoc.focus(); 
  //}
}