CKEditor 5 событие изменения высоты - PullRequest
Новая
       26

CKEditor 5 событие изменения высоты

1 голос
/ 19 марта 2020

Я хочу вызвать изменения высоты в текстовой области 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);
        });
}

Но это не работает ...

У вас есть идеи, как это исправить?

Спасибо за свое время и хорошего дня:)

1 Ответ

0 голосов
/ 19 марта 2020

Вы можете проверить высоту редактора внутри события 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>
...