JSFiddle - React, Tailwind, and code Playground

by activee

HTML

<input id="btn1" type="button" value="INSERT" style="background:white"/>

<div class="iframeEditorContainer" id="iframeEditorContainer">				
    <iframe name="richTextField" id="richTextField"
            style="width:100%;height: 200px "/>
</div>

JavaScript

$( document ).ready(function(){
    richTextField.document.designMode = "On"
});

$('#btn1').click(drawDivs);

 function drawDivs(){
	var idContainer = "container";
	var container = "<br/>"  +  "<div style='background:grey;'>1<div/>"+
			"<div style='border:2px solid red'>2</div><br/>";
	pasteHtmlAtCaret(container);

//	drawChart(idContainer);

}


function pasteHtmlAtCaret(html) {
	var window = richTextField;
    var sel, range;
    document.getElementById('richTextField').focus();
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            var el = richTextField.document.createElement("div");
            el.innerHTML = html;
            var frag =richTextField.document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (window.document.selection && window.document.selection.type != "Control") {
        // IE < 9
        window.document.selection.createRange().pasteHTML(html);
    }
}