JSFiddle - React, Tailwind, and code Playground

by Vedant_Terkar

HTML

<div id="tarea" contentEditable="true" class="tarea" autocorrect="false" spellCheck="off">
    <div class="tgg">Vedant Terkar</div> Creates another <div class="tgg">Fiddle</div> for all <div class='tgg'>SO</div> Users.
    
</div>

<textarea id="opc" rows="5" cols="97">
</textarea>

CSS

.tarea{
    width:99%;
    height:300px;
    overflow:auto;
    clear:both;
    display:inline-block;
    border:1px solid #000;
    padding:5px;
    outline:none;
    color:#333;
	}
	.tarea .tgg{
    background:#99d;
    color:#fff;
    padding:1px;
    border:1px solid #77b; 
	display:inline-block;
	}

JavaScript

$(document).ready(function(){
    $("#tarea").keyup(function(e){
    var html=$(this).html().toString().trim();
    html=html.split("<br>").join("\n");
    html=html.split("&nbsp;").join(" ");
        $("#opc").val(html);
        $(this).find(".tgg").each(function(){
        $(this).attr("contenteditable","true");
        });
    });
    $("#tarea").trigger("keyup");
});