Editor instance is not available on the ready event

[AlanObject]

My HTML template has:

<ckeditor #ckeditor [editor]="Editor" [data]="doc.text ? doc.text : ''"
                (ready)="evtEditorReady(ckeditor)"></ckeditor>

and in the Angular Component:

evtEditorReady(component: CKEditorComponent) {

    console.log('evtEditorReady', component);
    if (!component) return;

    let editorInstance = component.editorInstance;
    console.log('editorInstance', editorInstance);

    setTimeout(() => {
      editorInstance = component.editorInstance;
      console.log('editorInstance Again', editorInstance);
    }, 3000);

The first log of the variable is null, but in the setTimeout callback it is set. According to the documentation, the editorInstance is supposed to be available when that event is fired. I think that the problem is related to the ckeditor element is inside an *ngIf structure. There is a warning about that in the documentation, but the remedy was supposed to be to wait for the ready event and not rely on a @ViewChild reference.

Did I read this wrong? Is there another event I could use to get an editorInstance without relying on a timer delay?

The console shows

editorInstance null
editorInstance Again dj {_context: sc, id: 'ec7ea983f3d2b8c30f7c38ff4949b460e', config: Ga, plugins: $a, locale: ic, …}

[FilipTokarski]

Hi, after following the docs I was able to get the editor instance with ready event.

Template:

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>" (ready)="onReady($event)"></ckeditor>

Component:

export class AppComponent {
  title = 'sample_app';
  public Editor = Editor;

  public onReady( editor ) {
    console.log( editor )
  }
}

[AlanObject]

Thanks Filip your post led me to my error:

Wrong:

<ckeditor #ckeditor [editor]="Editor" [data]="doc.text ? doc.text : ''"
                (ready)="evtEditorReady(ckeditor)"></ckeditor>

Right:

<ckeditor [editor]="Editor" [data]="doc.text ? doc.text : ''"
          (ready)="evtEditorReady($event)"></ckeditor>

Based on some prior work I did I was trying to use the CKEditorComponent instance. My event handler is now:

  evtEditorReady(editor: any) {
    if (!editor) return;
    console.log('evtEditorReady', editor);
    editor.isReadOnly = true;
    const toolBarElement = editor.ui.view.toolbar.element;
    toolBarElement.style.display = 'none';
  }

Which works, but raises a related question. According to the documentation you are supposed to use the enableReadOnlyMode and disableReadOnlyMode function calls which no longer seems to exist. I got the above to work but it seems that the documentation is behind. Is this the correct way to instantiate a view-only editor?

[FilipTokarski]

In the latest release (34.0.0, which was a few days ago) we changed the way the read-only mechanism works. As you said, the editor now uses enableReadOnlyMode and disableReadOnlyMode. So currently (in editor version 34.0.0) you cannot do editor.isReadOnly = true; because it will raise the error (unless you use older editor version).
The new documentation (api docs and feature guide) was also released and should be up to date now.

[AlanObject]

Thanks for the follow-up. I hope this helps someone else on the same path.