获取ckeditor元素的高度

Question

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

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

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

我想要么

• 获取 CKEditor textarea 的当前高度（减去菜单，但我可以自己计算）
• 每当高度改变时，让 CKEditor 触发一些东西

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

Answer 1

1. 要获取当前高度，您可以使用：

    editor.ui.space( 'contents' ).getStyle( 'height' ); // eg 200px

   这将找到名为 contents 的 UI 空间，这是一个放置可编辑 iframe 的元素。 当您通过editor#resize()方法设置编辑器的高度时，此大小直接在内容 UI 空间上设置。

2. 你可以监听editor#resize事件来在编辑器的大小改变时执行一些代码：

    editor.on( 'resize', function() { console.log( 'resized...' ); } );

附注。 此答案对 CKEditor 4.0 有效。 它可能不适用于 CKEditor 3.6.x

Answer 2

如果要查找整个“经典”CKEditor（带工具栏）的高度，请尝试：

editor.container.$.clientHeight;

其中editor指向 CKEditor 实例。

Answer 3

此代码使用 JQuery 在“经典编辑器”（带工具栏）中获取文档正文的高度。 'editor' 是 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