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>