JSFiddle - React, Tailwind, and code Playground
HTML
<input type="submit" name="btnVisual" value="Visual" id="btnVisual" class="notSelected" onclick="javascript:return iframe_load();" />
<input type="submit" name="btnMarkup" value="Markup" id="btnMarkup" class="selected" onclick="javascript:return iframe_hide();" />
<div>
<iframe id="iframe" name="iframe" style="width: 100%; height: 500px; display: none;" frameborder="1"></iframe>
<textarea name="txtMarkup" rows="25" cols="75" id="txtMarkup"></textarea>
</div>
CSS
.selected {
font-weight: bold;
background-color: DarkGrey;
}
.notSelected {
font-weight: normal;
background-color: LightGrey;
}
JavaScript
function iframe_load() {
var txtBox = $("#txtMarkup");
var iframe = document.getElementById('iframe');
var contentWindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
$(iframe).show();
$("#btnVisual").removeClass("notSelected").addClass("selected");
$("#btnMarkup").removeClass("selected").addClass("notSelected");
if (document.all) { //IE
contentWindow.document.designMode = 'On';
var range = contentWindow.document.body.createTextRange();
range.pasteHTML($(txtBox).val());
range.collapse(false);
range.select();
contentWindow.focus();
} else {
contentWindow.document.designMode = 'On';
contentWindow.document.execCommand('selectAll', null, null); //Required to prevent appending
try { //This throws an error in FireFox, but command is successful
contentWindow.document.execCommand('insertHtml', false, $(txtBox).val());
} catch (ex) {}
contentWindow.focus();
}
return false;
}
function iframe_hide() {
var txtBox = $("#txtMarkup");
var iframe = document.getElementById('iframe');
$(txtBox).show();
$(iframe).hide();
$("#btnMarkup").removeClass("notSelected").addClass("selected");
$("#btnVisual").removeClass("selected").addClass("notSelected");
return false;
}