CK Editor - Uncaught TypeError: Cannot read property 'clearCustomData' of null in Chrome

Question

I am using CK Rich Text Editor in my application. I have a modal popup and within it I have three tabs - each of these Tabs renders the same Partial View in which I have a field call Description which is what I use CK Editor on. When I use IE 11 everything works as expected and the Tabs load with the Textarea turned into a CK Editor box and navigating between the tabs each time the text area stays as a Rich text Editor. However I am seeing strange behaviour in Chrome when I first open the modal box the description text area on each tab is turned into a ck editor as expected and as I tab between them each one is correctly a text area. However in Chrome if I close the modal box and repoen I get the error above in the console? If I have the modal box open and navigate between the Tabs 6 times I get the same error appearing and then lose the functionality of the text areas being rendred as CK rich text editors. Has anyone had anything similar or got a possible solution.

The code in my js file is as:

$(document).ready(function () {

    var editor = CKEDITOR.instances['Description'];
    if (editor) { editor.destroy(true); }
    CKEDITOR.replaceAll();

});

cshtml markup from the partial view that is rendered in the 3 tabs is as below:

 <div class="row">
                @Html.LabelFor(model => model.Description)
                <div class="col-md-10">
                    @Html.TextAreaFor(model => model.Description)
                </div>
            </div>

Answer 1

use this code to destroy CK editor:

 try {
     CKEDITOR.instances['textareaid'].destroy(true);
 } catch (e) { }
 CKEDITOR.replace('textareaid');

Answer 2

I have been able to come up with a solution for this in CKEditor 4.4.4.

In ckeditor.js (minified), line 784:

a.clearCustomData();

should be changed to:

if (a) {a.clearCustomData();}

Also on line 784:

(d=a.removeCustomData("onResize"))&&d.removeListener();a.remove()

should be changed to:

if (a){(d=a.removeCustomData("onResize"));if (d){d.removeListener();}a.remove()}

This appeared to fix the issue for me, I will also file a bug report with ckeditor so they can fix it as well.

Answer 3

The fix is here https://github.com/ckeditor/ckeditor-dev/pull/200 within ckEditor it will check for the existence of the iframe before clearCustomData is invoked. The reason it happens for you is that when the modal closes the iframe is removed before you are able to call destroy on the editor instance.

Try/catch is the best workaround for now.