Apply inline ckeditor using sharedspace on div inside iframe

[Asmi Mehta]

Steps to reproduce

1. apply ckeditor on iframe element.
2. Right click on specified div
3. Here you can find default toolbar

Expected result

​http://i.prntscr.com/59b1990a15e748658ef64e43f3686f02.png. I want a signle toolbar in shared space. where I click to the ediatable zone it should be populated with its id

Actual result

But it is showing like this. ​http://i.prntscr.com/5d2a8dc4218248e09439a5a049d20b87.png

The one toolbar in shared space with formatting i have applied and one toolbar at the editable portion with default editor.

Other details (browser, OS, CKEditor version, installed plugins)

When I tried to debug using console by writing CKEDITOR.instances, then also it returns single instance. Please reply as soon as possible. its urgent.

[Asmi Mehta]

This is my code sample.

var instance = $('.editable').attr('id');

var editor = CKEDITOR.instances[instance]; if (editor) {

editor.destroy(true);

} CKEDITOR.config.font_defaultLabel = 'Arial'; CKEDITOR.config.extraPlugins = 'sharedspace'; CKEDITOR.config.removePlugins = 'contextmenu,liststyle,tabletools,floatingspace,maximize,resize'; CKEDITOR.config.sharedSpaces = {

top: 'ckeditorEventsHolder'

}; CKEDITOR.config.toolbar_EventsToolbar1 =

[

{name: 'basictools', items: ['Font', '-', 'Bold', 'Italic', 'Underline', '-', 'TextColor']}

];

CKEDITOR.disableAutoInline = true; CKEDITOR.inline(id, {

toolbar: CKEDITOR.config.toolbar_EventsToolbar1, on: {

instanceReady: function (e) {

console.log(CKEDITOR.instances, 'instances: '); $('.cke_top').css('background', '#017FB2'); $('.cke_combo_button, .cke_toolgroup').css('background', '#FFFFFF');

Code to prevent images to be droped in editor. e.editor.document.on('drop', function (ev) {

ev.data.preventDefault(true);

});

}

}

});