JSFiddle - React, Tailwind, and code Playground

by Sandeep Agrawal

HTML

<script src="http://ckeditor.com/apps/ckeditor/4.0/ckeditor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/sc"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<ul id="sortable_ul">
    <li> <span class='icon'></span>
        <textarea id="editor1">Test</textarea>
    </li>
    <li> <span class='icon'></span>
        <textarea id="editor2">Test</textarea>
    </li>
</ul>

CSS

li {
    margin-bottom: 5px;
}
.icon {
    width: 10px;
    height: 10px;
    background-color: black;
    float: left;
    margin-right: 10px;
}
.drag-placeholder {
    background-color:#07a4d1;
    height:100%;
    width:90%;
}

JavaScript

$(function () {
    //Intiallize the editor
    initialize_ckeditor('editor1', '100%', '100');
    initialize_ckeditor('editor2', '100%', '100');

    //jQuery sortable to sort the list
    $('#sortable_ul').sortable({
        axis: 'y',
        placeholder: 'drag-placeholder',
        forcePlaceholderSize: true,
        stop: function (event, ui) {
            var textarea_id = ui.item.find('textarea').attr('id');
            //Reinitialize the editor
            CKEDITOR.replace(textarea_id, {
                'width': '100%',
                    'height': 100
            });
        },
        start: function (event, ui) {
            var textarea_id = ui.item.find('textarea').attr('id');
            //Destroy the editor
            CKEDITOR.instances[textarea_id].destroy();
        }
    }).disableSelection();

});


function initialize_ckeditor(element, width, height) {
    CKEDITOR.replace(element, {
        'width': width,
            'height': height
    });
}