javascript - CKEditor initial height -
i wanted place ckeditor 4 on div , fill content, dynamically resize editor if window resized. works ok, on instanceready, size of editor default value of 200px, have call custom resize function fit div's size.
is there way set size of editor div size, before showing it?.
here's 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>
you can set initial height in 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 create instance:
var editor = ckeditor.replace('content', { height: '500px' });
http://docs.ckeditor.com/#!/guide/dev_configuration
http://docs.ckeditor.com/#!/api/ckeditor-method-replace
Comments
Post a Comment