CKEditor 5 – get editor instances

Question

I am migrating from CKEditor 4.7 to 5.

In CKE4, I would do something like this: CKEDITOR.replace(\'text_area\'); and then in another JS function I could

Answer 1

It's not the first time I'm trying to remind myself how to access the CKEditor instance on a production website having just access to the DOM via the developer console, so a reminder for myself ;)

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#how-to-get-the-editor-instance-object-from-the-dom-element

It's possible to access the editor instance using the ckeditorInstance property which is available on the contenteditable element that CKEditor 5 is using. You can access this DOM element via e.g. the .ck-editor__editable class.

// A reference to the editor editable element in the DOM.
const domEditableElement = document.querySelector( '.ck-editor__editable' );

// Get the editor instance from the editable element.
const editorInstance = domEditableElement.ckeditorInstance;

// Now you can use the editor instance API.
editorInstance.setData( '
Hello world!
' );