JSFiddle - React, Tailwind, and code Playground

HTML

<style>
iframe {border: 1px solid #0D6AB7; background: #fff}
</style>

<p>
    <button onclick="format('bold')">Tučně</button>
    <button onclick="alert(getContent())">Zobrazit HTML</button>
    <button onclick="insertText('<h1></h1>')">H1</button>
    <button onclick="insertText('<h2></h2>')">H2</button>
    <button onclick="insertText('<h3></h3>')">H3</button>
</p>

<iframe id="editor" class="editor" frameborder="0"></iframe>

<script>
var editor, iframe;
window.onload = function() {
    iframe = document.getElementById("editor");
    editor = iframe.contentWindow.document;
    editor.designMode = "on";
}

function format(akce) {
    iframe.contentWindow.focus();
    editor.execCommand(akce, false, null);
}

function getContent() {
    return editor.body.innerHTML;
}

function insertText(element) {
    iframe.contentWindow.focus();
    var seltext = iframe.contentWindow.getSelection();
    element.replace('><', '>'+seltext+'<');
    editor.execCommand("insertText", false, element);
}
</script>