CkEditor - Uncaught TypeError: Cannot Read Property 'getSelection' Of Undefined

I am implementing the CKEditor in my app. When I am trying to instantiate CKEditor to the textarea I am getting following error Cannot read property 'getSelection' of undefined at

Solution 1:

1. I have a list of articles.
2. every time I clicked on any article a "dialog / modal" should be open.
3. in such dialog or modal there was a ckeditor element for the content of my article.
4. when I clicked on the first it worked like a charm.
5. the problem was after clicking on the 2nd, 3rd, 4th etc.

Then I started to have this error.

    TypeError: Cannot read property 'getSelection' of undefined
    at CKEDITOR.dom.selection.getNative (ckeditor.js:448)
    at new CKEDITOR.dom.selection (ckeditor.js:446)
    at a.CKEDITOR.editor.getSelection (ckeditor.js:443)
    at new CKEDITOR.plugins.undo.Image (ckeditor.js:1182)
    at CKEDITOR.plugins.undo.UndoManager.save (ckeditor.js:1177)
    at a.<anonymous> (ckeditor.js:1173)
    at a.n (ckeditor.js:10)
    at a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)
    at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
    at a.setData (ckeditor.js:275)

The solution for me was easy, tell the computer to destroy the ckeditor instance when the dialog / modal is closed. easy!.. Now is working like a charm =)

           $mdDialog.show({
             parent:      parentEl,
             targetEvent: $event,
             templateUrl: '/md-templates/blog-article.html',
             controller:  DialogController,
             scope:         $scope,
             preserveScope: true,
            onRemoving: function (event, removePromise) {
                if (CKEDITOR.instances.body) CKEDITOR.instances.body.destroy();
            }
        });

Solution 2:

I got same error, and I solved by initialize CKEditor, in $(document).function(ready());

$(document).ready(function () {
    CKEDITOR.replace('editor1', {
        language: 'tr',
        height: '300'
    });
});

I think when you initialize before page load, it doesn't find dom element(textarea)

Solution 3:

This is likely your application is attempting to access and set the data of the CKEditor before the editor is ready. This can be the result of a race condition, causing the error to be intermittent. There are a few things you can do to prevent this issue.

First, the CKEditor endorsed method of testing if the editor is loaded first.

if ( CKEDITOR.status == 'loaded' ) {
    // The API can now be fully used.
    doSomething();
} else {
    // Wait for the full core to be loaded and fire its loading.
    CKEDITOR.on( 'load', doSomething );
    CKEDITOR.loadFullCore && CKEDITOR.loadFullCore();
}

Second, if you are unable to control the timing associated with setting of the editor value, you could wrap the CKEDITOR.dom.window object in an async/await Promise that tests if the editor is loaded first, and if not, listens for the editor to load, and then complete setting the value. (note, this code is not fully tested)

CKEDITOR.dom.window = (function(window) {
    if ( CKEDITOR.status == 'loaded' ) {
        // The API can now be fully used.
        return window;
    } else {
        return (async function() {
            return await function() {
                return new Promise(resolve => {
                    CKEDITOR.on( 'load', () => {
                        resolve(window);
                    });
                });
            };
        })();

        CKEDITOR.loadFullCore && CKEDITOR.loadFullCore();
    }
})(CKEDITOR.dom.window);

Solution 4:

You can have a try

CKEditor.destroy();

Solution 5:

change the function f.$.onload inside ckeditor.js to the below

 f.$.onload=function(){var toutMs =5000;
    if(CKEDITOR.document.getHead().$.childElementCount > 6)
    {
    toutMs=0;
      }
    setTimeout(function(){
    A(b,!0)
     },toutMs)
     }