1

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

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

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

我想要么

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

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

4

3 回答 3

4

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

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

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

  2. 当编辑器的大小发生变化时，您可以监听editor#resize事件以执行一些代码：

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

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

于 2012-12-30T13:40:14.797 回答
4

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

editor.container.$.clientHeight;

其中editor指向 CKEditor 实例。

于 2014-12-16T15:31:45.270 回答
0

此代码使用 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

于 2019-11-07T11:48:15.757 回答