首页 文章

Angular，ng-ckeditor和editor-destroy-iframe错误

提问于
浏览 次
2

该帖子是关于ng2-ckeditor@1.1.13的，载有ckeditor@4.8.0 .

虽然有一些关于SO的文章有这个问题，但我相信这仍然是一个悬而未决的问题 . 请不要将此帖子标记为重复 .

复制问题：1）使用 ckeditor 指令实例化DOM元素 . 2）远离视图导航，以便托管 ckeditor 的Angular组件被销毁 . 你在Javascript控制台中得到这个：

ckeditor.js:19 [CKEDITOR] Error code: editor-destroy-iframe.

除非我错过了，否则github上有一个closed bug没有明显或可接受的解决方案 . 如果有解决方案，我们应该在这篇文章中记录它，因为它不完整或模糊不清 .

问题显然是Angular框架在 ckeditor 本身被破坏之前会破坏 iframe 元素 . 这会导致诊断消息 .

一个建议的解决方案涉及使用名为 divarea 的插件 . 根据我的理解，这将 iframe 替换为 div 元素 . 这有问题的原因是托管页面中的CSS元素将与CKEDITOR使用的CSS混合在一起 .

另一个提议的解决方案涉及以下代码片段：

for (name in CKEDITOR.instances) {
    CKEDITOR.instances[name].destroy(true);
}

这个SO posting提到了这一点，并询问可以插入此代码的位置 . 没有Angular生命周期事件似乎有效 . 即使它确实这样做也不是一个可接受的解决方案，因为它会破坏所有CKEDITOR实例，并且在我的应用程序中，页面上可能存在多个可能在路由器事件中存活的情况 .

沿着这些路线，我发现我可以通过这些步骤在Angular Component中找到“my”CKEDITOR实例 . 在模板中：

<ckeditor id="content"
            #editor
            [(ngModel)]="editorContent"
            [config]="{}"
            debounce="500"
            name="content"
  ></ckeditor>

除了 Build 局部变量的 #editor 指令外，这是标准的 . 然后在组件中，您可以构建一个这样的方法：

declare const CKEDITOR: any;

@Component() ....

  @ViewChild('editor') ckeditor: CKEditorComponent;

  destroyEditor() {
     var name = this.ckeditor.instance.name;
     CKEDITOR.instances[name].destroy(true);
  }

所以问题是：在哪里调用 destroyEditor 函数？ （其他问题是 destroy(true) 方法是否是正确的方法 . ）

从 ngOnDestroy 调用它不起作用 . 从路由器捕获事件也没有奏效 . 还有其他建议吗？

angular ckeditor

1 回答

  • 2

    我正在使用Angular 6，这就是我所做的 .

    我以编程方式使用它来销毁iFrame

    Please Note: 我不想让任何编辑在场，所以我把它们全部摧毁了 . 需要注意的是，如果用户正在导航，并且返回CKEDITOR，则会创建一个新实例 . （editor2 ... 3 ... 4 ... 5等）我不关心实例int所以我将它们全部销毁并让angular根据用户交互创建新实例 .

    destroyEditor(){
      let editor = window['CKEDITOR'];
      if(editor.instances){
        for(var editorInstance in editor.instances){
         editor.instances[editorInstance].destroy();
        }
       }
      }

    这将允许您在任何退出条件下销毁iframe . 当用户离开编辑器时，我在设置更改UI视图的值并完成离开编辑器的导航之前调用此权限 .

    • 它会留下一个文本区域 .

    • 如果你正确计时，用户将看不到这一点 .

    您将注意到此时您仍然在ckeditor.component.js的控制台中收到错误

    • 这是您必须对库文件进行修改的地方 .

    • 这是因为CKEditorComponent.prototype.ngOnDestroy函数中的if条件仅检查实例，而不是实例名称是否存在 .

    • 即使实例已被销毁，实例似乎总是对我评估为true . （例如：editor1，editor2，editor3等）

    • 当ngDestroy发生时，实例名称不存在...因为...您已将其销毁 .

    在以下文件中进行此更改 .

    \node_modules\ng2-ckeditor\lib\src\ckeditor.component.js

    这将专门检查实例名称而不是尝试销毁...因为..你已经销毁了它 .

    CKEditorComponent.prototype.ngOnDestroy = function () {
        var _this = this;
        //if (this.instance) {
        if(CKEDITOR.instances[_this.instance.name]) {
            setTimeout(function () {
                _this.instance.removeAllListeners();
                CKEDITOR.instances[_this.instance.name].destroy();
                _this.instance.destroy();
                _this.instance = null;
            });
        }
    };
    回复于

相关问题