JSFiddle - React, Tailwind, and code Playground

by SkeLLLa

HTML

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
<script src="http://arcticlab.ru/arcticmodal/js/arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
<link rel="stylesheet" href="http://arcticlab.ru/arcticmodal/js/arcticmodal/jquery.arcticmodal-0.3.css">
<link rel="stylesheet" href="http://arcticlab.ru/arcticmodal/js/arcticmodal/themes/simple.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
<div class="content">
    blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />
    <a href="#" id="showPopup">Popup!</a>
    <br />
    blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />blah <br />
</div>
<div class="popupContainer">
    <div style="display: none;">
    <div class="box-modal" id="exampleModal">
        <div class="box-modal_close arcticmodal-close">close</div>
        <textarea id="text"></textarea>
    </div>
</div>
</div>

JavaScript

function initEditor(selector){
    if (CKEDITOR.instances[selector]) {
        CKEDITOR.instances[selector].destroy();
    }
    CKEDITOR.config.toolbar = [
        ['Styles','Format','Font','FontSize'],
        '/',
        ['Bold','Italic','Underline','StrikeThrough','-'],
        ['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['TextColor','BGColor']
    ] ;
    CKEDITOR.config.title = false;
    CKEDITOR.config.height = '10em';
    CKEDITOR.replace(selector,{
        startupFocus : true
    });
        
    CKEDITOR.on('instanceReady', function(e) {
        $('.cke_contents').css('height','10em');
    });
}

$(function(){
    $('#showPopup').on('click', function(){
        $('#exampleModal').arcticmodal({
            afterOpen: function() {
                initEditor("text");
            }, 
            afterClose: function() {
                if (CKEDITOR.instances['text'] != undefined)
                    CKEDITOR.instances['text'].destroy();
            }
        });
    });
});