JSFiddle - React, Tailwind, and code Playground

by Ravi MCA

HTML

<script src="//cdn.ckeditor.com/4.4.2/standard/ckeditor.js"></script>
<script src="//cdn.ckeditor.com/4.4.2/standard/adapters/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<input type="button" value="jqDialog" id="jqudialog_button"/>
		<div>
			<span>some text</span><span id="ckeditor_text" style="background-color:rgb(241, 225, 105);"></span><span>some text</span>
		</div>

JavaScript

var ckconfig = {height:150,autoParagraph : false,toolbar:[['Bold', 'Italic', 'Subscript', 'Superscript', '-', 'SpecialChar']]}
			$(document).ready(function(){
				var insdiv = '<div style="background-color:lightgray;" title="Title"><textarea class="editor" id="myTextField" /></textarea><div style="padding: 5px 0px;" id="insert_errormsg"></div></div>';
				var $ins_dialog = $(insdiv).dialog({
					modal: true,
					resizable: false,
					autoOpen: false,
					width: 'auto',
					height: 'auto',
					buttons: {
						Insert: function() {
							var editor = $('textarea.editor').ckeditorGet();
							var data = editor.getData();
							console.debug(data);
							$("#ckeditor_text").html(data);
							$(this).dialog("close");
							
					},
					close:function(){
						delete CKEDITOR.instances;
						$(this).dialog("close");
					}
					}});
				
				
				$("#jqudialog_button").click(function(){
					$ins_dialog.dialog('open');
					$('#myTextField').ckeditor(ckconfig);					
				});
			});