Question

我想在div上放置一个CKEditor 4并填充其内容，然后在调整窗口大小时动态调整编辑器的大小。这可以，但是在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>

Answer 1

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

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

CKEditor初始高度

1 个答案: