JSFiddle - React, Tailwind, and code Playground

by Derek Klingman

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://cdn.skatrix.com/tools/ckeditor/4.0.1/ckeditor.js"></script>
<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(){
        
        //Initialize the non-modal dialog
        $my_dialog = $("#my-dialog").dialog({
            autoOpen: false, width: 'auto', modal: true,
            create: function(){
                $my_editor = CKEDITOR.replace("my-editor");
            },
            close: function(){
                
                //Reset the textarea element
                $my_editor.destroy(true);
                
                //Reset the dialog div element
                $my_dialog.dialog('destroy');
            },
            _allowInteraction: function(event) {
                console.log(event.target);
                return !!$(event.target).find('[class*="cke"]').length || this._super(event);
            }
        });
        
        $my_dialog.dialog('open');
    });
    
    $.widget('ui.dialog', $.ui.dialog, {
        _allowInteraction: function(event) {
            return !!$(event.target).closest('[class*="cke"]').length || this._super(event);
        }
    });
    
});