How to sync data with ckeditor and codemirror?

(function () {
    var plugin = CKEDITOR.plugins.codemirror;
    CKEDITOR.plugins.add('codemirror', {
        requires: ['sourcearea'],
        init: function (editor) {
            var thisPath = this.path;
            editor.on('mode', function () {
                if (editor.mode == 'source') {
                    var txtarea = editor.textarea.$; //get the native source-mode textarea
                    txtarea.style.display = "none"; //hide it
                    var containerTd = txtarea.parentNode; //get the containing TD
                    //we need to embed a new iframe and document to avoid CKE styles so make a new iframe and replace native source-mode textarea
                    var ifrm = document.createElement('iframe');
                    with (ifrm) {
                        id = 'cm2'; frameborder = '0'; frameBorder = '0'; src = thisPath + "codemirror.html"; name = editor.name;
                        with (style) { height = '100%'; width = '100%'; }
                    };
                    containerTd.replaceChild(ifrm, txtarea);
                    editor.on('beforeCommandExec', function (e) {//about to leave source-mode
                        e.removeListener(); //only trigger once
                        e.editor.setData(ifrm.contentWindow.cmInstance.getValue()); //set the editor html
                        e.editor.fire('dataReady'); //data is ready
                    });
                }
            });
        }
    });
})();