JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer bg">
	<div class="editArea container">
		<div class="edit-pannel clearfix">
			<div id="h" class="control-btn shd" style="width:15px; ;border:gray solid 1px">H</div>
		
		</div>
	
		<div contenteditable="true" class="edit-zone shd" style="width:100%; height:auto min-height:300px; padding:20px; background:#FFFFFF;border:gray solid 1px; "><p>Put Yor Content Here</p></div>
	</div>
</div>

JavaScript

var ele;
var selText = "";
$('.editArea').keyup(update).mouseup(update);
function update(e) {

	if (window.getSelection) {
			var sel = window.getSelection();
			var range = sel.getRangeAt(0);
			console.log (sel);
			console.log(range.startContainer.parentElement.tagName);
			selText = sel.toString();
			
	} else if (document.selection && document.selection.type != "Control") {
			selText = document.selection.createRange().text;
	}
//	console.log (selText);
}

function replaceSelectedText(replacementText) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
						//console.log(range);
            range.deleteContents();
            range.insertNode(replacementText);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = replacementText;
    }
}

$('#h').click (function (){
	var ele = document.createElement('h3');
	ele.innerHTML = selText;
	replaceSelectedText (ele);
});

$('#b').click (function(){
	ele = document.createElement('span');
	$(ele).addClass('bold');
	ele.innerHTML = selText;
	replaceSelectedText (ele);
});

$('#v').click(function (){
	ele = document.createElement('iframe');
	var l = prompt('請貼上Youtube連結');
	var a = l.search('\\?'); console.log (a);
	var srh = l.substring(a,l.length); console.log(srh);
	var vID = getURLParameter('v',srh);console.log(vID);
	var pre ='<iframe width="960" height="540" src="http://www.youtube.com/embed/',
	aft = '" frameborder="0" allowfullscreen></iframe>';
	var ifm = pre + vID + aft ;
	$('.edit-zone').append(ifm);

});

$('.control-btn').each(function(index, element) {
	disableSelect(element);
});



function disableSelect(el){			
    if(el.addEventListener){
        el.addEventListener("mousedown",disabler,"false");
    } else {
        el.attachEvent("onselectstart",disabler);
    }
}
function disabler(e){
   ...