Fatal编程技术网

Javascript 切割器初始高度

javascript css ckeditor

Javascript 切割器初始高度,javascript,css,ckeditor,Javascript,Css,Ckeditor,我想在div上放置一个CKEditor 4并填充其内容，然后在调整窗口大小时动态调整编辑器的大小。这工作正常，但在InstanceRady上，编辑器的大小是默认值200px，然后我必须调用自定义调整大小函数以适应div的大小 在显示编辑器之前，是否有办法将其大小设置为div大小 代码如下： <!DOCTYPE html> <html lang="es"> <head> <script src="../js/jquery-1.11.1.min.

我想在div上放置一个CKEditor 4并填充其内容，然后在调整窗口大小时动态调整编辑器的大小。这工作正常，但在InstanceRady上，编辑器的大小是默认值200px，然后我必须调用自定义调整大小函数以适应div的大小

在显示编辑器之前，是否有办法将其大小设置为div大小

代码如下：

<!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>


html，正文{
身高：100%；
边际：0px；
}
标题{
背景颜色：黄色；
高度：50px；
}
页脚{
背景颜色：黄色；
高度：50px；
}
#内容{
宽度：100%；
身高：100%；
-webkit盒尺寸：边框盒；/*Safari/Chrome，其他webkit*/
-moz盒大小：边框盒；/*Firefox，其他壁虎*/
盒尺寸：边框盒；/*Opera/IE 8+*/
填充顶部：50px；
利润上限：-50px；
填充底部：50px；
边缘底部：-50px；
} 
头衔等
版权等
函数调整大小（编辑器）{
editor.resize（$（“#content”）.width（），$（“#content”）.height（）；
};
var editor=CKEDITOR.replace（'content'）；
CKEDITOR.on（'instancerady'，函数（evt）{
警报（“调整大小前的编辑器大小：”+Editor.ui.space（'contents'）.getStyle（'height'））；
调整大小（evt.editor）；
警报（“调整大小后的编辑器大小：”+Editor.ui.space（'contents'）.getStyle（'height'））；
});
$（窗口）.resize（函数（）{resize（编辑器）}）；
$（文档）.resize（函数（）{resize（编辑器）}）；
您可以在配置中设置初始高度：

config.height = 500;        // 500 pixels.
config.height = '25em';     // CSS length.
config.height = '300px';    // CSS length.

或者在创建实例时：

var editor = CKEDITOR.replace('content', {
    height: '500px'
});

是的，Moob，我已经试过了，但是如果我设置高度：$（“#content”）.height（）编辑器的高度大于content div高度。您应该编辑您的问题以反映这一点。您询问如何设置初始高度。您可以在配置中或初始化实例时执行此操作。您的代码显示您已经能够在调整大小时更改高度-您是说当您更改高度时，它是不正确的吗？