title: Angular, ng-ckeditor, and the editor-destroy-iframe bug
body: <p>This posting is regards ng2-ckeditor@1.1.13 loaded with ckeditor@4.8.0.</p>
  
  <p>Although there are a couple of articles on SO with this question I believe this is still an open question.  Please do not mark this posting as a duplicate.</p>
  
  <p>To replicate problem:  1) instantiate a DOM element with the <strong>ckeditor</strong> directive.  2) navigate away from the view in such a way that the Angular Component that is hosting the <strong>ckeditor</strong> is destroyed.  You get this in the Javascript console:</p>
  
  <pre><code>ckeditor.js:19 [CKEDITOR] Error code: editor-destroy-iframe.
  </code></pre>
  
  <p>There is a <a href="https://github.com/chymz/ng2-ckeditor/issues/24" rel="noreferrer">closed bug</a> on github over this with no apparent or acceptable solution, unless I missed it.  If there is a solution there we should document it on this post because it is incomplete or obscure.</p>
  
  <p>The problem is apparently that Angular framework destroys the <strong>iframe</strong> element before the <strong>ckeditor</strong> itself is destroyed. This causes the diagnostic message.</p>
  
  <p>One proposed solution involves the use of a plugin called <strong>divarea</strong>.  From what I understand this replaces the <strong>iframe</strong> with a <strong>div</strong> element.  The reason this is problematic is that the CSS elements from the hosting page will be mixed in with the CSS that CKEDITOR uses. </p>
  
  <p>Another proposed solution involves the following snippet of code:</p>
  
  <pre><code>for (name in CKEDITOR.instances) {
      CKEDITOR.instances[name].destroy(true);
  }
  </code></pre>
  
  <p>This <a href="https://stackoverflow.com/questions/41547096/ckeditor-error-code-editor-destroy-iframe-in-angular-2">SO posting</a> mentions this and asks for where this code can be inserted.  There is no Angular lifecycle event that seems to work.  Even if it did this would not be an acceptable fix because it destroys all CKEDITOR instances and in my application there might be more than one on the page that might survive a router event.</p>
  
  <p>Along those lines I discovered that I can find "my" CKEDITOR instance in my Angular Component with these steps.  In the template:</p>
  
  <pre><code>  &lt;ckeditor id="content"
              #editor
              [(ngModel)]="editorContent"
              [config]="{}"
              debounce="500"
              name="content"
    &gt;&lt;/ckeditor&gt;
  </code></pre>
  
  <p>Which is standard except for the <strong>#editor</strong> directive which establishes a local variable.  Then in the component you can build a method like this:</p>
  
  <pre><code>declare const CKEDITOR: any;
  
  @Component() ....
  
    @ViewChild('editor') ckeditor: CKEditorComponent;
  
    destroyEditor() {
       var name = this.ckeditor.instance.name;
       CKEDITOR.instances[name].destroy(true);
    }
  </code></pre>
  
  <p>So the question is: where to call the <strong>destroyEditor</strong> function?  (Other question is whether the <strong>destroy(true)</strong> method is the right one to call.)</p>
  
  <p>Calling it from <strong>ngOnDestroy</strong> does not work.   Catching an event from the router hasn't worked either.   Any other suggestions?</p>