CK Editor - 在Chrome中出现“Uncaught TypeError: Cannot read property 'clearCustomData' of null”错误

Question

我在应用程序中使用CK富文本编辑器。在我的模态框中，我有三个选项卡 - 每个选项卡都呈现相同的部分视图，在其中我有一个称为“Description”的字段，这是我在CK Editor上使用的。在使用IE 11时，一切正常，选项卡加载时Textarea转换为CK编辑器框，并且在每次导航选项卡时，文本区域仍然保持为富文本编辑器。然而，当我在Chrome中打开模态框时，我看到了奇怪的行为，每个选项卡上的描述文本区域如预期地被转换为Ck编辑器，并且当我在它们之间切换时，每个选项卡的文本区域都正确。但是在Chrome中，如果我关闭模态框并重新打开，我会在控制台上看到上面的错误？如果我打开模态框并在选项卡之间导航6次，则会出现相同的错误，然后失去将文本区域呈现为CK富文本编辑器的功能。是否有人遇到过类似的问题或可能的解决方案。

我的js文件中的代码为：

$(document).ready(function () {

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

});

在三个选项卡中呈现的局部视图的 cshtml 标记如下所示：

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

- Ctrl_Alt_Defeat

---

你能提供一个fiddle吗？为什么要使用if (editor) { editor.destroy(true); }？我猜这就是为什么在压缩版本中a为空（即编辑器实例等于a）。 - GuyT

Answer 1

使用以下代码来销毁CK编辑器：

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

- Ali U

Answer 2

我能够在CKEditor 4.4.4中找到解决方案。

在ckeditor.js（经过压缩的版本）的第784行：

a.clearCustomData();

应该改为：

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

另外在第784行：

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

应该改为：

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

这对我来说似乎解决了问题，我还将向ckeditor提交一个错误报告，以便他们也可以修复它。

- Jeff Steil

---

我同意你的看法，这可能只是一个临时解决方案。我想知道的唯一一件事是为什么在那种特殊情况下a为空。除非你确切地知道a代表什么，否则这个解决方案并不是一个干净的解决方案。 - GuyT

我完全同意，我的解决方案只是为了让事情正常运行而进行的一种hack，我正在准备一个示例供ckeditor支持团队查看。 - Jeff Steil

有关这个问题是否有具体的解决方案了吗？他们在 CK5 中修复了这个问题吗？ - ScorpionKing2k5

@ScorpionKing2k5 我不确定这个问题是否已经在CK5中得到修复。 - Jeff Steil

Answer 3

解决方法在这里https://github.com/ckeditor/ckeditor-dev/pull/200。在ckEditor中，它将在清除自定义数据之前检查iframe的存在。您遇到的原因是当模态关闭时，iframe被删除，然后才能调用编辑器实例上的destroy。现在最好的解决方法是使用try/catch。

- Nate Loftsgard

---

你应该详细阐述你的答案 - 这个链接可能会被删除。 - TDG