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

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -