What is the equivalent of attach/detach of TinyMCE in Ckeditor? - ckeditor

Question

I am currently migrating all TinyMCE plugins to CKeditor and having trouble with InsertInline plugin.
In TinyMCE I have a code like this:
(function ($) {
Drupal.wysiwyg.plugins['insertinline'] = {
/**
* Return whether the passed node belongs to this plugin.
*/
isNode: function(node) {
return ($(node).is('img.wysiwyg-inline-image'));
},
/**
* Execute the button.
*/
invoke: function(data, settings, instanceId) {
alert(Drupal.t('This is a pseudo plugin/button.\nIt does not insert an inline image.\n\nPlease use the INSERT button from the image upload fieldset.'));
},
/**
* Replace all <!-- INLINE:xxx;w=x;h=x --> tags with images.
*/
attach: function(content, settings, instanceId) {
that = this;
// Replace inline images with physical image
content = content.replace(new RegExp('<!-- INLINE:([0-9]*);w=([0-9]*);h=([0-9]*) -->', 'gi'), function($0, $1, $2, $3) { return that._getPlaceholder($1, $2, $3); });
return content;
},
/**
* Replace images with <!-- INLINE:xxx;w=x;h=x --> tags in content upon detaching editor.
*/
detach: function(content, settings, instanceId) {
var $content = $('<div>' + content + '</div>'); // No .outerHTML() in jQuery :(
$.each($('img.wysiwyg-inline-image', $content), function (i, elem) {
altText = ' ' + Drupal.checkPlain(elem.getAttribute('alt')) + ' ';
if (elem.parentNode && elem.parentNode.parentNode && elem.parentNode.tagName == 'H2') {
// Moving the current element to left side of H2 tag
elem.parentNode.parentNode.insertBefore(document.createComment(altText), elem.parentNode);
elem.parentNode.removeChild(elem);
}
else {
elem.parentNode.insertBefore(document.createComment(altText), elem);
elem.parentNode.removeChild(elem);
}
});
return $content.html();
},
/**
* Helper function to return a HTML placeholder.
*/
_getPlaceholder: function (fid, w, h) {
if (!fid) {
fid = '';
}
if (!w) {
w = '240';
}
if (!h) {
h = '240';
}
// Grab image detail data
var imgData = Drupal.cnngo_inline.getInlineImageDetail(fid, w, h);
// Build and return image tag
return '<img src="' + imgData.src + '" alt="' + imgData.alt + '" title="' + imgData.title + '" class="wysiwyg-inline-image" width="' + w + '" height="' + h + '" />';
}
};
})(jQuery);
How it works:
Let say I uploaded a 600x600 px image and I inserted it in the WYSIWYG area by default it will insert an img tag
When I click the "Insert" button as described in the image. It will insert img tag like this
<img class="wysiwyg-inline-image" title="Inline image 240x240" src="http://mydomain.com/sites/default/files/styles/inline_image_temp_240x240/public/2013/05/28/600x600_1.png" alt="INLINE:142879;w=240;h=240" width="240" height="240" data-mce-src="http://mydomain.com/sites/default/files/styles/inline_image_temp_240x240/public/2013/05/28/600x600_1.png">
See the image below.
Now if I'm going to detached the editor (clicked the Switch to plain text) the img tag is replaced by
<p><!-- INLINE:142879;w=240;h=240 --></p>
And it will show the img tag (will render the img) when I turned the editor back on.
Can someone point me in the right direction of what is the equivalent of detact/attach in Ckeditor.
I spent hours in Google but can't find the exact answer (maybe my question is not right).