CKEditor resizing 2nd try

For SO question#37887901

by Louys Patrice Bessette

HTML

<script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<h3>Try to resize the "window" by dragging<br>
← this line </h3>

Script message: <span id="msg"></span>
<form id="CKform">
  <textarea name="editor1" id="editor1" rows="10" cols="80">
    This is my textarea to be replaced with CKEditor.
  </textarea>
</form>
<br>
<h3 id="2nd"></h3>

CSS

#CKform{
	position:fixed;
	top:10%;
}
#msg{
	color:#187810;
	font-weight:bold;
}

JavaScript

// Replace the <textarea id="editor1"> with a CKEditor
	// instance, using default configuration.
	CKEDITOR.replace( 'editor1', {
		height : 200,
		autoGrow_minHeight : 200,
		on:{
			resize: function(){
				$("#msg").html("CKEditor resized!");
				$("#2nd").html("This is a different event!");
			}
		}
	});

	var cke_1_top_Width_memory;
	
	window.onresize = function(e) {
	
		$("#msg").html("Window resized!");
		cke_1_top_Width = $(document).find("#cke_1_top").css("width");
		
		console.log("");
		console.log("onresize fct begin, cke_1_top_Width_memory: "+cke_1_top_Width_memory);		// undefined on the first pass.
		
		// If previous value is different, change the CKE editable zone height
		if(cke_1_top_Width!=cke_1_top_Width_memory){
			
			console.log("CKE Height is changing!");
			
			// Calculate difference between the 2 values
			diff=parseInt(cke_1_top_Width_memory)-parseInt(cke_1_top_Width);
			
			cke_1_contents = parseInt($(document).find("#cke_1_contents").css("height"));
			console.log("cke_1_contents height: "+cke_1_contents+"px");

			New_cke_1_contents = cke_1_contents+((diff*16)/4)+"px";		// assuming 16 px is something like on line... For each 4 px lost on width.
			// To ensure a minimal height
			if(New_cke_1_contents<"200px"){
				New_cke_1_contents="200px";
			}
			
			$(document).find("#cke_1_contents").css({"height":New_cke_1_contents});
			
			after = $(document).find("#cke_1_contents").css("height");
			console.log("cke_1_contents height - after: : "+after);
		}
		
		// update mem
		cke_1_top_Width_memory = cke_1_top_Width;
		
		console.log("onresize fct end, cke_1_top_Width_memory: "+cke_1_top_Width);
		
		//$("#CKform").css({"top":"30%"});
		$("#2nd").html("Also try to resize CKEditor by dragging it's bottom-right corner");
	};