CODEWITHSUNDEEP
ckeditorckeditor5
user3691644
user3691644

Reputation: 517

How to get data from CKEditor 5 instance

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?

Upvotes: 18

Views: 23020

Answers (3)

Rug
Rug

Reputation: 21

I ran into what felt like a unique situation where I was loading multiple instances of CKeditor5 on a page but I also had features to dynamically add/remove/rearrange text areas that had editors applied to them.

Creating an array that contained all the instances was manageable but also a bit more complicated to keep track of when adding/removing/rearrange editor instances.

I instead decided to obtain the innerHTML of the editor instances by selecting all .ck-editor__editable classes and iterating over them to check the content.

document.querySelector("button[type='submit']").addEventListener('click', (event) => {
  event.preventDefault();
  const domEditableElements = document.querySelectorAll('.ck-editor__editable');
  for (let i = 0; i < domEditableElements.length; ++i) {
    let elementData = domEditableElements[i].innerHTML
    if (elementData === '<p><br data-cke-filler="true"></p>') {
      console.log(`Field ${i} is empty`);
    }
  }
});

Console logging indicated that ck-editor stored <p><br data-cke-filler="true"></p> in blank fields.

Upvotes: 0

Arvind
Arvind

Reputation: 83

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

Upvotes: 4

Reinmar
Reinmar

Reputation: 22013

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.

Upvotes: 32

Related Questions