JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<div id="open_now">Open Overlay</div>
<div id="ovl">
    <textarea id="test"></textarea>
</div>

CSS

#open_now{
    cursor:pointer;
    padding:7px;
    width:100px;
    text-align:center;
    background-color:black;
    color:white;
        
}

#ovl{
    display:none;
    width:400px;
    border:10px solid #666;   
}

JavaScript

! function ($, window, document, _undefined) {

	function loadMCE($editor){
		console.log('Found editors', $editor);
		var self = this;

		function init() {
			var editorId = $editor.attr('id'),
				config = {
					selector: '#' + editorId
				};
	
				var ed = new tinymce.Editor(editorId, config, tinymce.EditorManager);
				ed.render();
				console.log('Mce editor', ed);
		}

		if(typeof tinymce === 'undefined')
		{
			console.log('Mce needs to be loaded');
			$.getScript("http://tinymce.cachefly.net/4.0/tinymce.min.js")
				.done(function (script, textStatus) {
					setTimeout(function () {
                           init();
                            console.log('Mce Rendering will fail...');
                    }, 100);
				})
				.fail(function (jqxhr, settings, exception) {
					console.error("Mce can't be loaded");
				});
		}
		else
		{
			console.log('Mce was already loaded');
			setTimeout(function () {
                init();
                console.log("Mce Rendering will succeed");
            }, 0);
		}
	};

	var ovlConfig = {
		mask: {
	 	color: '#fff',
		loadSpeed: 200,
		opacity: 0.5
		},
		onLoad:function(e){
			var $ovl = this.getOverlay();
			$editors = $ovl.find('textarea');
			loadMCE($editors)
		}
	};
	
	$("#ovl").overlay(ovlConfig);
	var api =  $("#ovl").data('overlay');
	
	$('#open_now').click(function(){
	   api.load(); 
	});
}
(jQuery, this, document);