Menu
I wanted to place a CKEditor 4 on a div and fill its content, then dynamically resize the editor if the window is resized. This works ok, but on instanceReady, the size of the editor is a default value of 200px, then I have to call my custom resize function to fit the div's size.
Is there a way to set the size of the editor to the div size, before showing it?.
Here's the code:
<!DOCTYPE html>
<html lang="es">
<head>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/ckeditor/ckeditor.js"></script>
</head>
<style>
html, body {
height: 100%;
margin: 0px;
}
header {
background-color: yellow;
height: 50px;
}
footer {
background-color: yellow;
height: 50px;
}
#content {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding-top: 50px;
margin-top: -50px;
padding-bottom: 50px;
margin-bottom: -50px;
}
</style>
<body>
<header>title etc</header>
<div id="content"></div>
<footer>copyright etc</etc>
<script>
function resize(editor){
editor.resize($("#content").width(), $("#content").height());
};
var editor = CKEDITOR.replace( 'content' );
CKEDITOR.on('instanceReady', function(evt){
alert("Editor size before resize: " + editor.ui.space( 'contents' ).getStyle( 'height' ));
resize(evt.editor);
alert("Editor size after resize: " + editor.ui.space( 'contents' ).getStyle( 'height' ));
});
$(window).resize(function() { resize(editor) });
$(document).resize(function() { resize(editor) });
</script>
</body>
</html>
777
You can set the initial height in the config:
config.height = 500; // 500 pixels.
config.height = '25em'; // CSS length.
config.height = '300px'; // CSS length.
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-height
Or when you create the instance:
var editor = CKEDITOR.replace('content', {
height: '500px'
});
http://docs.ckeditor.com/#!/guide/dev_configuration
http://docs.ckeditor.com/#!/api/CKEDITOR-method-replace
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
