CKEditor - How do I get the data from a ckeditor element that was not assigned an ID initially

Question

I just started using CKEditor, and I went through the API Documentation, which was really good, though there was some stuff left out. At some point their help or documentation takes you to a page and says to post questions and look for answers on it on StackOverflow, so here I am.

In the documentation, it does say how to get the data or to look for changes based on an elements ID. I have a page that the elements being created on it are dynamically generated and are not getting an ID as they are being dynamically generated. These elements are textarea and <div contenteditibable='true' . I know when CKEditor does its thing, it will create an ID on certain parts of the elements as well. I know in HTML everything gets an ID in the DOM. And I know that I am oversimplifying things.

Using CKEditor, how do I get the data or change event from something I don't know the ID for?

Answer 1

Please see the source code for inlineall sample. There is a pretty smart event used which allows you getting to each editor instance (when it is created) and its element. Inside that event listener you can change initial editor configuration (with the help of other event to be more precise).

Editor has also instanceReady event which you can use in the same way to assign change event that will capture all changes for particular editor instance. Finally inside the change event listener (as well as other editor events ), you can get access to editor for which the event was fired eg

CKEDITOR.on( 'instanceReady', function( evt ) {
     evt.editor.on( 'change', function( e ) {
        console.log( e.editor );
        console.log( e.editor.element );
     } );
} );

Hope this helps you get started.