CKEditor4 locks browser with devextreme dx-data-grid when using [innerHtml] angular binding

93 Views Asked by At

I'm trying to track down an issue that's causing the Chrome browser to lock up (giving the dialog asking if you want to "wait" on the page or close it).

This occurs inside an angular application using ckeditor4 as one of several libraries that used to play together nicely prior to moving from ckeditor 4.16.2 to the latest versions.

It requires four things in order to happen:

  1. CKEditor is used inside a ngbNav tab (ng-bootstrap component that builds tabs using UL / LI html elements)
  2. Have a different tab than the one that contains ckeditor selected, then navigate to a new page at a new URL.
  3. The new page contains a dx-data-grid table that has a column using an [innerHtml] angular binding.
  4. A version of ckeditor4 newer than 4.16.2. I've reproduced this issue in 4.19, 4.19.1, and 4.20

The specific column template for the table that when removed, stops this issue from occurring:

<div *dxTemplate="let data of 'bodyTemplate'">
    <div [innerHtml]="getSafeHtml(data.value, true)"></div>
</div>

Effectively what this does is loop through each row on the table and remove the HTML tags inside the elements, and I can't insert the safe HTML into the column without binding to the property in this manner, so I can't just rewrite my table.

We do have code in place in the angular component that is supposed to destroy ckeditor on navigation, and I can confirm this code is getting invoked:

destroyCKEditor() {
   const editor = window['CKEDITOR'];
   if (editor.instances) {
    for (const editorInstance in editor.instances) {
      if (editor.dialog.getCurrent()) {
        editor.dialog.getCurrent().hide();
      }
      editor.instances[editorInstance].destroy();
    }
  }
}

If you navigate when the ckeditor tab is active, this doesn't happen. If you navigate to a page that doesn't have an [innerHTML] binding, this doesn't happen. If you use ckeditor version 4.16.2, this doesn't happen. So I'm reasonably confident it's something ckeditor changed.

My theory is that something in ckeditor is not getting destroyed when we switch tabs and then navigate, and a listener of some sort is getting triggered when we set the innerhtml on the columns in the table. Again, the only change to the application is upgrading the version of ckeditor4.

Any suggestions on how to track down what's causing the page to lock up and/or how to properly destroy ckeditor would be appreciated.

0

There are 0 best solutions below