Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#14610 closed Bug (invalid)

Notification plugin Cannot read property 'getClientRect' of null

Reported by: Stan Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:


Steps to reproduce

  1. I have overlay popup window with bigger size of CK with Empty Toolbar. Other config is: removePlugins: "autosave,embed,embedbase,notificationaggregator,notification,toolbar,elementspath,backup,uploader,charcount,stat"
  2. After confirm button I copy content of this CK to page by this code:
if (CKEDITOR.instances['ck'] && CKEDITOR.instances[elemName]) {
        var data = CKEDITOR.instances.e1.getData();

        var config = CKEDITOR.instances[elemName].config;
        config.allowedContent = {
            // Allow all content.
            $1: {
                elements: CKEDITOR.dtd,
                attributes: true,
                styles: true,
                classes: true
        CKEDITOR.replace(elemName, config);

        CKEDITOR.instances[elemName].setData( data);

        var editorText = document.getElementById(elemName);
        editorText.value = data;
  1. Content is copied, but after few seconds I have error in console:

notification/plugin.js:617 Uncaught TypeError: Cannot read property 'getClientRect' of null

Expected result

No errors.

Actual result

notification/plugin.js:617 Uncaught TypeError: Cannot read property 'getClientRect' of null

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

CK 4.5.8, Chrome 50.0, Win 8.1, autosave plugin

Attachments (1) (1.7 MB) - added by Stan 8 years ago.

Download all attachments as: .zip

Change History (9)

comment:1 Changed 8 years ago by Jakub Ś

Keywords: notification plugin removed
Status: newpending
Version: 4.5.8

In order to accept a bug we need clear reproduction steps in as simplified environment as possible (best default).

  • Currently you have bunch of third-party plugins, non-standard CKEditor plugins and if I understand correctly, you are not using the toolbar. This is very non-standard.
  • Error gets thrown in notification plugin and is probably connected to missing toolbar:
     top = 'top' ),
     topRect = top.getClientRect(), //here
    This plugin requires toolbar plugin but from what I can see in your bits of code, you are removing both plugins so I unsure why this code gets executed at all.

Currently this is very unclear, please simplify your test case as much as possible and send us working sample - HTML page which can be put into default CKEditor samples folder and will show this issue (extra CKEditor plugins are of course allowed)

comment:2 Changed 8 years ago by Stan

1. Its very simple. Use plugin autosave, behind CK editor make button which show popup overlay with full features + confirm button. After click of confirm button script take content from CK on popoup and put it into replaced CK with all source configs. AS you can see my code. 2. You can make another test with disabled toolbar. var notification2 = editor.showNotification( 'Error occurred', 'warning' ); This will show different message. 3. I tried to enable plugins: notificationaggregator,notification,toolbar And error is same.

comment:3 Changed 8 years ago by Jakub Ś

  1. Autosave is a third-party plugin and not plugin created by CKSource. Is it possible to reproduce this issue without it?
  2. To make it clear - Instead of guessing what author had in mind, I need the same exact file which is causing problems for him. File should be as simple as possible i.e. I should be able to run it with standalone CKEditor without third-party plugins or core-code customizations .It should be also possible to reproduce this issue in standalone CKEditor and not only integrated into your application. Are you able to provide such file?

comment:4 Changed 8 years ago by Stan

autosave plugin using notification plugin which is core plugin. And error is on notification plugin not on autosave.

comment:5 Changed 8 years ago by Jakub Ś

Nevertheless, I need the working sample. Could you please provide reduced and working file which is causing problem for you?

Changed 8 years ago by Stan

Attachment: added

comment:6 Changed 8 years ago by Stan

I uploaded just now. Steps to reproduce:

  1. open index.html
  2. click href "Edit more in Editoru" under CK
  3. insert some text and confirm by OK
  4. wait few second for JS error in console.

comment:7 Changed 8 years ago by Jakub Ś

Resolution: invalid
Status: pendingclosed

The problem is with your implementation and how autosave and notification work.

Error gets thrown in notification plugin with these lines

top = 'top' ),
topRect = top.getClientRect(),

It gets thrown because, autosave uses notification and notification needs toolbar to display correctly.

The problem is that you remove the entire editor and notification can't find the toolbar anymore. After commenting below line in your function, no error is thrown.

function zavriOkno(id)
  //  removeElement(document.getElementById(id));

Conclusion is - notification plugin doesn't assume that someone will remove the editor before displaying the notification so please change your implementation so that it fits the requirement.

comment:8 Changed 8 years ago by Stan

Did you see that before removeElement I used CKEDITOR.instances[elemName].destroy(true); which will destroy complete ckeditor object? When complete object ckeditor with plugins are destryed, why notification plugin continue?

Version 0, edited 8 years ago by Stan (next)
Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy