JSFiddle - React, Tailwind, and code Playground

by thomi_ch

HTML

<link rel="stylesheet" href="http://demo.nilooma.com/system/plugins/jquery-ui/1.10.3/css/jquery-ui-1.10.3.custom.css">
<script src="http://demo.nilooma.com/system/plugins/jquery-ui/1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script src="http://demo.nilooma.com/system/plugins/tinymce/4.1.5dev/tiny_mce/tinymce.js"></script>
<button id="open_dialog">open dialog</button>
<div id="dialog" style="display: none;"></div>

JavaScript

$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
		e.stopImmediatePropagation();
	}
});

$("#open_dialog").click(function() {
        $("#dialog").html("<textarea id='taxtarea' name='taxtarea' style='width: 90%; height: 350px;'>blablablablaaa</textarea>");
        $("#dialog").dialog({
            title: "Titleeeeeeee",
            bgiframe: true,
            height: 600,
            width: 400,
            modal: true,
            resizable: false,
            draggable: true,
            closeOnEscape: true,
            open: function() {                        
                $("body").css({ overflow: 'hidden' });
            },
            beforeClose: function() {
                $("body").css({ overflow: 'inherit' });
                $("#dialog").html(""); //we want empty the dialog content
                $("#dialog").dialog("destroy"); // and destroy the dialog, so html is clean
            }
        });

        tinymce.init({
            selector : 'textarea',
            toolbar: 'link',
            plugins: 'link'
        });
    });