Warm tip: This article is reproduced from stackoverflow.com, please click
ckeditor ckeditor5 html javascript

CKEditor 5 change height event

发布于 2020-06-02 18:16:15

i want to trigger the height changes in the text area of ckeditor5. On the website i found the event 'change:height' but it isn't firing.

Here is my code:

 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);
        });
}

But it doesn't work ...

Do you have any ideas on how to fix it?

Thank you for your time and have a nice day :)

Questioner
user13090109
Viewed
52
分享
Zekros Admines 2020-03-20 03:20

You can check the editor height inside the change event and see if the height has changed.

Please run the below snippet and check the console:

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>
user13090109 1970-01-01 08:00:00

It works THANK YOU!!! Have a nice evening, stay healthy (and survive corona ^^)

Related issues

1
CSS selector of inner elements
2
How to define a font size that scales with browser zoom level?
3
How can I submit 's data without in HTML?
4
F# count all present links on html website
5
p tag within a div affecting the adjacent div's position
6
Dropdown Nav Menu Appears on Right and Stacked Horizontally
7
Javascript website security
8
Why is my getting cut off when resizing window?
9
How to get bootstrap to take whole screen
10
HTML JS