温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - CKEditor 5 change height event
ckeditor ckeditor5 html javascript

javascript - CKEditor 5更改高度事件

发布于 2020-06-04 11:01:18

我想在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);
        });
}

但这不起作用...

您对如何解决有任何想法吗?

谢谢您的时间,祝您有美好的一天:)

查看更多

提问者
user13090109
被浏览
18
Zekros Admines 2020-03-20 03:20

您可以检查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>