JSFiddle - React, Tailwind, and code Playground

by vijayweb

CSS

body {
    background: #EEE;
}

#editor {
    background: #FFF;
    width: 820px;
    height: 420px;
    overflow: auto;
}

JavaScript

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><script src="index3_files/jquery.js"></script>

    <script src="index3_files/jquery_003.js" type="text/javascript"></script>
    <script src="index3_files/jquery_002.js" type="text/javascript"></script>
    <link rel="stylesheet" href="index3_files/jquery.css" type="text/css">
    <link rel="stylesheet" href="index3_files/jquery.htm" type="text/css">
    <link rel="stylesheet" href="index3_files/demos.css" type="text/css">

  <script type="text/javascript">

    jQuery(function($){
$('#editor').bind('paste',function(e){
 setTimeout(function(){
      $('img').Jcrop({
        onChange:   showCoords,
        onSelect:   showCoords,
        onRelease:  clearCoords
      });

    });
   
        });
});

    // Simple event handler, called from onChange and onSelect
    // event handlers, as per the Jcrop invocation above
    function showCoords(c)
    {
      $('#x1').val(c.x);
      $('#y1').val(c.y);
      $('#x2').val(c.x2);
      $('#y2').val(c.y2);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };

    function clearCoords()
    {
      $('#coords input').val('');
    };

function insertNodeBeforeCaret(node) {
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(false);
            range.insertNode(node);
            range = range.cloneRange();
            range.selectNodeContents(node);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var html = (node.nodeType == 1) ? node.outerHTML : node.data;
        var id = "marker_" + ("" + Math.random()).slice(2);
        html += '<span id="' + id + '"></span>';
        var textRange = document.selection.createRange();
      ...