How to get data from CKEditor 5 instance

Question

I know that for CKEditor 4, you can get the textarea data like this:

var content = CKEDITOR.instances['comment'].getData();

How is this done for CKEditor 5?

Answer 1

You can find the answer in the Basic API guide.

Basically, in CKEditor 5 there's no single global editors repository (like the old CKEDITOR.instances global variable). This means that you need to keep the reference to the editor that you created and use that reference once you'll want to retrieve the data:

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.getData(); // -> '<p>Foo!</p>'
    } )
    .catch( error => {
        console.error( error );
    } );

If you need to retrieve the data on some other occasions (who would read it just after initializing the editor, right? ;)), then save the reference to the editor in some shared object of your application's state or some variable in the scope:

let theEditor;

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        theEditor = editor; // Save for later use.
    } )
    .catch( error => {
        console.error( error );
    } );

function getDataFromTheEditor() {
    return theEditor.getData();
}

See this JSFiddle: https://jsfiddle.net/2h2rq5u2/

EDIT: If you need to manage more than one editor instance, see CKEDITOR 5 get editor instances.

Answer 2

Declare a global variable and then use editor.getData(). Something like this:

var editor;
ClassicEditor
    .create(document.querySelector('#editor'))
    .then(editor => {
        editor=editor;
    })
    .catch(error => {
        console.error(error);
    });

Then, in your event handler, this should work:

editor.getData();