JSFiddle - React, Tailwind, and code Playground

by marsel_aipassa

HTML

<script src="http://cdn.skatrix.com/tools/ckeditor/4.0.1/ckeditor.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<p><button id="show-dialog">Show Editor</button></p>
<div id="my-dialog" title="CKEditor Dialog" style="display:none;">
    <textarea id="my-editor" ></textarea>
</div>

JavaScript

$(function() {
    var $my_dialog = null;
    var $my_editor = null;
    
    $( "#show-dialog" ).button().click(function(){
        //Insert the overlay div before the dialog div
        $('<div id="overlay" class="ui-widget-overlay" />').insertBefore("#my-dialog");
        
        //Initialize the non-modal dialog
        $my_dialog = $("#my-dialog").dialog({
            autoOpen: false, width: 'auto', modal: false,
            create: function(){
                $my_editor = CKEDITOR.replace("my-editor");
            },
            close: function(){
                //Remove the overlay div element
                $("#overlay").remove();
                
                //Reset the textarea element
                $my_editor.destroy(true);
                
                //Reset the dialog div element
                $my_dialog.dialog('destroy');
            }
        });
        
        //Giving some time for CKEditor instance to be initialized,
        //the result is the dialog will be displayed at the center.
        setTimeout(function(){
            $my_dialog.dialog("open");
        },100);
    });
});