JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Ajax — CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="http://cdn.skatrix.com/tools/ckeditor/4.0.1/ckeditor.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript">
var editor, html = '';
var config = {};
function createEditor()
{
if ( editor )
return;
$("#editor").bind('dialogopen', function() //JQ
{
editor = CKEDITOR.replace('editor1', config, 'aaa');
}).bind('dialogclose', function()
{
removeEditor();//CK
$(this).dialog('destroy');
})
.dialog({autoOpen: false,
maxHeight:0.95 * $(window).height(),//1
width: 800,
modal: true,
position: 'top',
resizable: false,
autoResize: true }).dialog('open');
}
function removeEditor()
{
if ( !editor )
return;
// Destroy the editor.
editor.destroy();
editor = null;
}
</script>
<p>Click the buttons to create jquery dialog and CKEditor instance.</p>
<p>
<input onclick="createEditor();" type="button" value="Create Editor" />
</p>
<div id="editor">
<textarea id="editor1" ><a href="/"
>click me</a></textarea>
</div>
</body>
</html>
CSS
#editor1{display:none}