Prepend CKEditor element with another element - ckeditor

Question

Whenever a table-element is inserted (through the table-icon), I would like to prepend it with another element. Eg.
<div>Hello World!</div> <!-- this was automatically added -->
<table>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
</table>
Trying to achieve this with a custom plugin, but I just can't get it to work:
(function ($) {
CKEDITOR.plugins.add('hello_world', {
init: function (editor) {
editor.on('insertElement', function(ev) {
if (ev.data.getName() === 'table') {
var helloWorld = new CKEDITOR.dom.element('div');
helloWorld.appendText('Hello World!');
ev.data.insertBeforeMe(helloWorld);
}
});
}
});
})(jQuery);
Console returns an "Uncaught TypeError: Cannot read property 'insertBefore' of null" error. The API documentation (http://docs.ckeditor.com/#!/api/CKEDITOR.dom.element) however states that the insertBefore and insertBeforeMe functions are available.

Answer 1

You are getting this error because at this stage, the element is not yet added to the CKEditor (therefore its parent is null).
If you don't mind adding the comment right after the element, you may use the following code instead:
CKEDITOR.plugins.add('hello_world', {
init: function (editor) {
editor.on('insertElement', function(ev) {
if (ev.data.getName() === 'table') {
ev.data.append(new CKEDITOR.dom.comment(' this was automatically added '), true );
}
});
}
});
Then you will get the following output:
<table><!-- this was automatically added -->
See JSFiddle here.
Note: if you must add the comment before the table and you're feeling brave, you may delay the addition of the comment by using a timer:
CKEDITOR.plugins.add('hello_world', {
init: function (editor) {
editor.on('insertElement', function(ev) {
if (ev.data.getName() === 'table') {
var table = ev.data;
setTimeout(function () { table.insertBeforeMe(new CKEDITOR.dom.comment(' this was automatically added '))}, 0);
}
});
}
});
You will then get the desired output:
<!-- this was automatically added -->
<table>
See JSFiddle here

Answer 2

May be this solution of you problem:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'responsivetables';
};
CKEDITOR.plugins.add('responsivetables', {
init: function (editor) {
editor.on('insertElement', function (event) {
if (event.data.getName() === 'table') {
var div = new CKEDITOR.dom.element('div').addClass('table-scroll'); // Create a new div element to use as a wrapper.
div.append(event.data); // Append the original element to the new wrapper.
event.data = div; // Replace the original element with the wrapper.
}
}, null, null, 1);
}
});