API to allow access to an element before it is inserted in the editor

[Teresa Monahan]

When a table is created, we would like to be able to apply attributes/styling to the table element before it is inserted in the editor. Is it possible to expose an API which would give us access to the new element and the dialog data before insertElement() is called in the dialog's onOK function?

While the table element is our current concern, it would be great if a general API was eventually made available that would allow manipulation of any element before it is inserted in the editor.

[Piotrek Koszuliński]

There's an ​editor#insertElement event.

[Satya Minnekanti]

Replying to Reinmar: Can you please tell us from which build we can see this new fature?

[Piotrek Koszuliński]

That event is available at least since CKEditor 4.0 and in all CKEditor builds (it's a core event).

[Piotrek Koszuliński]

To clarify - this event is fired by the editor.insertElement method, so after it was executed. However, it is fired before the element has been inserted into the DOM, because it is inserted into the DOM by the code which is one of its listeners.

So, if you want to do something before the element is inserted, add a listener with a high priority (1-10).

var editor = CKEDITOR.replace( 'editor1' );

editor.on( 'insertElement', function( evt ) {
	console.log( 'with priority 9: ', evt.data.getParent() );
}, null, null, 9 );
editor.on( 'insertElement', function( evt ) {
	console.log( 'with priority 11: ', evt.data.getParent() );
}, null, null, 11 );

This will log:

'with priority 9: null'
'with priority 11: <p>'