JSFiddle - React, Tailwind, and code Playground

by andibioticum

HTML

<div id="textcontent" contenteditable="true"><p>Enter text</p></div>
<button type="button" class="btn btn-primary" id="setBold">Bold</button>
<button type="button" class="btn btn-primary" id="getHTML">HTML</button>
<textarea id="htmlcontent"></textarea>

JavaScript

$('#setBold').click(function () {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    }
    else {
        var selObj = document.getSelection();
        var selRange = selObj.getRangeAt(0);        
        var newNode = document.createTextNode(' ');
        
        selRange.deleteContents();
        selRange.insertNode(newNode);
        
        selObj.removeAllRanges();
        selObj.addRange(selRange);
        
        document.execCommand('bold');
        
        selObj.removeAllRanges();
        selObj.addRange(selRange);        
    }
});

$("#getHTML").click(function () {
    $("#htmlcontent").val($("#textcontent").html());        
    
//$('#htmlcontent').html($('#htmlcontent').text().replace(/(<\/(P|OL|LI|UL|TAB|TR|TD|TBODY)>)/ig, '$1\n'));