繁体   English   中英

CKEditor的初始高度

[英]CKEditor initial height

我想将CKEditor 4放在div上并填充其内容,然后在调整窗口大小时动态调整编辑器的大小。 这项工作正常,但是在instanceReady上,编辑器的大小是默认值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>

您可以在配置中设置初始高度:

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

http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-height

或在创建实例时:

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

http://docs.ckeditor.com/#!/guide/dev_configuration
http://docs.ckeditor.com/#!/api/CKEDITOR-method-replace

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM