CKEditor 5 改变高度事件

Question

我想触发ckeditor5文本区域的高度变化。在网站上我找到了事件 'change:height' 但它没有触发。

这是我的代码：

 ClassicEditor
        .create(document.querySelector('#Comment'),{
            toolbar: [ 'heading', '|', 'bold', 'italic', 'blockQuote' ],
        })
        .then(editor => {
            console.log(editor);
            Editor = editor;
            console.log(Editor);
            editor.model.document.on( 'change:data', () => {            

            } );     
            editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {

            } );
            editor.model.document.on( 'change:height', (eventInfo, name, value, oldValue) => {
                alert('height'); // ?????
            } );         
        })
        .catch(error => {
            console.error(error);
        });
}

但是不行...

你有什么解决办法吗？

感谢您的宝贵时间，祝您有愉快的一天:)

Answer 1

您可以在 change 事件中检查编辑器高度，看看高度是否发生了变化。

请运行以下代码段并检查控制台：

let editorWidth;
let editorHeight;

ClassicEditor
  .create(document.querySelector('#Comment'), {
    toolbar: [ 'heading', '|', 'bold', 'italic', 'blockQuote' ],
  })
  .then(editor => {

    editor.model.document.on('change', (eventInfo, name, value, oldValue) => {
        const newWidth = editor.ui.view.element.offsetWidth;
        const newHeight = editor.ui.view.element.offsetHeight;

        if(editorWidth !== newWidth || editorHeight !== newHeight) {
          console.log('Editor size changed. New size:', newWidth, newHeight);
          editorWidth = newWidth;
          editorHeight = newHeight;
        }
    });

  })
  .catch(error => {
      console.error(error);
  });

<script src="https://cdn.ckeditor.com/ckeditor5/17.0.0/classic/ckeditor.js"></script>

<div id="Comment"></div>

CKEditor 5 改变高度事件

CKEditor 5 change height event

javascript

html

ckeditor

ckeditor5