JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<script src="http://lonewolfs.x10.mx/libs/ckeditor/ckeditor.js"></script>
<script src="http://lonewolfs.x10.mx/libs/ckeditor/adapters/jquery.js"></script>
First Editor<select id="enabledisable">
    <option value="enable">Enable</option>
    <option value="disable">Disable</option>
</select>

Second Editor<select id="enabledisable1">
    <option value="enable">Enable</option>
    <option value="disable">Disable</option>
</select>

<div class="wrapper">
    <form id="myfrm" name="myfrm" class="myfrm" action="" method="post">
        <textarea id="myeditor" name="myeditor"></textarea>
        <input type="submit" id="submit" name="submit" value="Submit" />        
    </form>
    <form id="myfrm1" name="myfrm1" class="myfrm1" action="" method="post">
        <textarea id="myeditor1" name="myeditor1"></textarea>
        <input type="submit" id="submit" name="submit" value="Submit" />       
    </form>
</div>

CSS

.wrapper{width:500px;margin:auto;border:1px solid #333;height:800px;}
color:#CCC;height:50px;position:relative;bottom:0px;}

JavaScript

$(document).ready(function(e) {
    var myeditor = $('#myeditor');
    var editorobj = myeditor.ckeditor();
    myeditor.ckeditorGet().config.resize_enabled = false;
    myeditor.ckeditorGet().config.height = 200;
    
    var myeditor1 = $('#myeditor1');
    var editorobj1 = myeditor1.ckeditor();
    myeditor1.ckeditorGet().config.resize_enabled = false;
    myeditor1.ckeditorGet().config.height = 200;


    //change event for the first ckeditor
    $('#enabledisable').change(function(){
        var x = $(this);
        if(x.val()=='enable'){
           myeditor.removeAttr('disabled');
        }else if(x.val()=='disable'){
           myeditor.attr('disabled','disabled');
        }
        myeditor.ckeditorGet().destroy();
        myeditor.ckeditor();
    });
    
    //change event for the second ckeditor
    $('#enabledisable1').change(function(){
        var x = $(this);
        if(x.val()=='enable'){
           myeditor1.removeAttr('disabled');
        }else if(x.val()=='disable'){
           myeditor1.attr('disabled','disabled');
        }
        myeditor1.ckeditorGet().destroy();
        myeditor1.ckeditor();
    });
    
});