我想在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);
});
}
但这不起作用...
您对如何解决有任何想法吗?
谢谢您的时间,祝您有美好的一天:)
您可以检查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>
谢谢你!祝您有个愉快的夜晚,保持健康(并度过电晕^^)