JSFiddle - React, Tailwind, and code Playground

by RickS

HTML

<textarea name="iTextarea" id="iTextarea">One<br>Two<ul><li>Three</li></ul>Four<br>Five</textarea>
<iframe name="iIframe" id="iIframe" frameborder="0" scrolling="no"></iframe>

CSS

#iIframe {
    width: 400px;
    height: 250px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    resize: none;
    background: #eeeeee;
}

JavaScript

/*--------------------------------------------------
 * ONLOAD
 */

$(window).load (function () {
    // HIDE AND SHOW
    $("#iTextarea").hide ();
    $("#iIframe").show ();
    
    // OPEN IFRAME
    var rte_iframe_contents = $("#iIframe").contents ().get (0);
    rte_iframe_contents.open ();
    
    // TEXTAREA VALUE IN IFRAME
    rte_iframe_contents.write ($("#iTextarea").val ());
    
    // CLOSE IFRAME
    rte_iframe_contents.close ();
    
    // DESIGN MODE
    rte_iframe_contents.designMode = "on";
    
    // SET EVENT LISTENER
    if (iIframe.document.addEventListener) {
        // IE9+, FF, CHROME, SAFARI AND OPERA
        iIframe.document.addEventListener ("keydown", rte_iframe_key_down, true);
    } else {
        // IE8-
        iIframe.document.attachEvent ("onkeydown", rte_iframe_key_down);
    }
    
    // VIEW MODE: RTE
    rte_global_vars.rte_view_mode = 1;
});

/*--------------------------------------------------
 * VAR
 */

// GLOBAL
var rte_global_vars = {};

/*--------------------------------------------------
 * IE
 */

if (/MSIE (\d+\.\d+);/.test (navigator.userAgent)) {
    // YES: GLOBAL VAR
    rte_global_vars.rte_ie = true;
}

/*--------------------------------------------------
 * EVENT LISTENERS
 */

var rte_key_down_event;

function rte_iframe_key_down (rte_key_down_event) {
    // 13: ENTER
    if (rte_key_down_event.keyCode == 13) {
        // EXTRACT SELECTED TEXT
        var sel = iIframe.document.getSelection ();
        var sel_text = sel.getRangeAt (0);
        
        // COMMON ANCESTOR
        var parent_element = sel_text.commonAncestorContainer;
        parent_element = parent_element.parentNode;
        var parent_element_string = parent_element.toString ();
        
        // PARENT LI?
        if (parent_element_string != "[object HTMLLIElement]") {
            // NO: PREVENT DEFAULT
            if (rte_key_down_event.preventDefault) {
                // IE9+, FF, CHROME, SAFARI AND OPERA
               ...