<!DOCTYPE html>
<html>
<head>
<title>CKEditor .destroy() issue in IE</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h2>CKEDITOR .destroy() issue in all IE's!</h2>
<form name="myForm">
<div id="dialog">
<div id="param1">
<h3>ckeditor</h3>
<label>
<textarea id="txtarea"></textarea>
</label>
</div>
<div style="display: none;" id="param2">
<h3>input</h3>
<label>
<input/>
</label>
</div>
<button id="prev">prev</button>
<button id="next">next</button>
</div>
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js" data-semver="1.8.3" data-require="jquery@1.8.3"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!-- <script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>-->
<script>
(function(){
// My IIFE
$("#dialog").dialog({
height: 500,
width: 700
});
$("#txtarea").focus();
CKEDITOR.replace("txtarea", {
toolbar: [
['Source']
]
});
$("#prev").on("click", function(){
// on step initialization
CKEDITOR.replace("txtarea");
$("#param1").show();
$("#param2").hide();
$("#txtarea").focus();
});
$("#next").on("click", function(){
// and destruction, things go awry in IE 9, 10, 11
CKEDITOR.instances.txtarea.destroy();
$("#param1").hide();
$("#param2").show();
});
}());
</script>
</body>
</html>
// Code goes here
/* Styles go here */
CKEditor .destroy() issue in IE