Question

我在页面上有CKEditor。每当用户通过拖动编辑器来改变高度时，我想知道新的高度，所以我可以保存它。

使用CKEDITOR.config.height我可以获得配置的高度，但我想要当前高度。

我也尝试过使用jQuery中的height（），但这只能给我通过CSS设置的高度 - 如果没有设置高度，它会给我“43”。

我想要

获取CKEditor textarea的当前高度（减去菜单，但我可以自己进行计算）
每当高度改变时，让CKEditor触发某事

原因是，我想将此信息与内容一起保存，以便调整iframe的大小，以便正确显示。

Answer 1

要获得当前高度，您可以使用：
```
editor.ui.space( 'contents' ).getStyle( 'height' ); // e.g. 200px
```
这会找到名为contents的UI空间，这是放置可编辑iframe的元素。当您通过editor#resize()方法设置编辑器的高度时，此大小将直接设置在内容UI空间上。
当编辑器的大小发生变化时，你可以监听editor#resize事件来执行一些代码：
```
editor.on( 'resize', function() {
    console.log( 'resized...' );
} );
```

PS。这个答案对CKEditor 4.0有效。它可能不适用于CKEditor 3.6.x

Answer 2

如果要寻找整个＆＃34;经典＆＃34;的高度。 CKEditor（带工具栏）试试：

editor.container.$.clientHeight;

其中editor指向CKEditor实例。

Answer 3

此代码使用JQuery在“经典编辑器”（带有工具栏）中获取文档主体的高度。 “编辑器”是CKEDITOR的一个实例：

CKEDITOR.on( 'instanceReady', function( evt )
  {
    var editor = evt.editor;

   editor.on('change', function (e) { 
    var contentSpace = editor.ui.space('contents');
    var ckeditorFrameCollection = contentSpace.$.getElementsByTagName('iframe');
    var ckeditorFrame = ckeditorFrameCollection[0];
    var innerDoc = ckeditorFrame.contentDocument;
    var innerDocTextAreaHeight = $(innerDoc.body).height();
    console.log(innerDocTextAreaHeight);
    });
 });

https://codepen.io/edsonperotoni/pen/OJJZzZq

参考文献：

https://github.com/ckeditor/ckeditor4/blob/af6f5152347bcecd5feb6a89a5b7882cc99292a3/plugins/wysiwygarea/plugin.js

https://ckeditor.com/old/forums/CKEditor/Get-height-of-content-in-the-Ckeditor

获取ckeditor元素的高度

3 个答案: