JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-cssclassapplier.js"></script>
<script src="https://raw.github.com/dave1010/jquery-fast-click/master/jQuery.fastClick.js"></script>
<iframe id='iframe' width='80%' height='200px' frameborder='1'></iframe>
<div><input id='grabtext' type='text' /><button id='grab'>Grab Text and Boundaries</button></div>
<div><input id='boundaries' type='text' /><button id='highlight'>Highlight</button></div>

JavaScript

$(function () {
    var iframe = $("iframe")[0];
    var iframeDoc = iframe .contentDocument || iframe.contentWindow.document;
    iframeDoc.open();
    iframeDoc.write("<html><head><style>chucknorris { border: 1px solid red;} .highlight {position:relative;background-color:red;}img.ER_note {position: absolute;float: right;right: 0px;top: 1px;width: 12px;height: 12px;}</style></head><body>Please <a href='http://www.google.com/'>select some of this</a> text <em>and </em> <b>the button</b></body></html>");
    iframeDoc.close();

   $('#grab').fastClick(function () {
        var t = '', 
            window = $('iframe')[0].contentWindow.window, 
            document = $('iframe')[0].contentWindow.document,
            chucknorris = document.createElement("chucknorris");
       
        if (window.getSelection) {
            t = window.getSelection();
        } else if (document.getSelection) {
            t = document.getSelection();
        } else if (document.selection) {
            t = document.selection.createRange().text;
        }        
        $('#grabtext').val(t);        
        if ($('#grabtext').val() !== '') {
            wrapper = rangy.createCssClassApplier(null, {
                elementTagName: "chucknorris"
            });
            wrapper.applyToSelection(window);
        }
       
        var boundaries = '';
        var chucknorrisCount =  $('#iframe').contents().find('chucknorris').length;
        for (var i = 0; i < chucknorrisCount; i++) {
          var bodyHTML = $('#iframe').contents().find('body').html(), 
            start = bodyHTML.indexOf('<chucknorris>'), 
            end = bodyHTML.indexOf('</chucknorris>')-13;
    
          if (i !== 0) { boundaries+= ','; }
          boundaries+= start + ',' + end;                
          bodyHTML = bodyHTML.removeTag('<chucknorris>');
          bodyHTML = bodyHTML.removeTag('</chucknorris>');
          $('#iframe').contents().find('body').html(bodyHTML);
        }
       ...