Editor object and it's API

[rashmingadhvi]

I've tried same way and was able to see the editor on HTML page. then next question comes is how do I get Editor instance to use it's APIs like get and set data or even try configuration changes.

[martinmolema]

Hi there,

Sorry for the delay. I'm not an expert, but what I use is the (onready)="function()" in the HTML of CKEditor. In this function you will get an instance of the editor after it was initialised. You could save it in a class instance variable for future use. Please see the app.component.html and app.component.ts on the Master-branch (sorry, not switched to 'main' branch yet)

HTML:

<ckeditor [editor]="ckEditor" data="Hello world" (ready)="onReady($event)"></ckeditor>

Typescript:

  public onReady( editor: any ) {
    editor.ui.getEditableElement().parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.getEditableElement()
    );
  }

Does this help?

[rashmingadhvi]

Thank you for your reply. I will try that.

Regards, Rashmin Gadhavi

On Tue, Jan 31, 2023, 4:07 PM Martin Molema @.***> wrote:

Hi there,

Sorry for the delay. I'm not an expert, but what I use is the (onready)="function()" in the HTML of CKEditor. In this function you will get an instance of the editor after it was initialised. You could save it in a class instance variable for future use. Please see the app.component.html https://github.com/martinmolema/CKEditor5Angular13/blob/master/src/app/app.component.html and app.component.ts https://github.com/martinmolema/CKEditor5Angular13/blob/master/src/app/app.component.ts on the Master-branch (sorry, not switched to 'main' branch yet)

HTML:

<ckeditor [editor]="ckEditor" data="Hello world" (ready)="onReady($event)">

Typescript:

public onReady( editor: any ) { editor.ui.getEditableElement().parentElement.insertBefore( editor.ui.view.toolbar.element, editor.ui.getEditableElement() ); }

Does this help?

— Reply to this email directly, view it on GitHub https://github.com/martinmolema/CKEditor5Angular13/issues/1#issuecomment-1411071281, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEWDCURRCV6HSV7OTDAK4N3WVF5HNANCNFSM6AAAAAAUEGOL6A . You are receiving this because you authored the thread.Message ID: @.***>

[rashmingadhvi]

Hi Martin, I have created CKEditor5 as custom build using their guide. It's APP.JS component, I can integrate it with my angular app too. But after integrating, how do I get the object is the question. Do you have any idea?

I do not use <ckeditor [editor]="ckEditor" data="Hello world" (ready)="onReady($event)">. I inject the editor with createEditor and into a DIV id I'm injecting.

https://github.com/ckeditor/ckeditor5-angular/issues/347

[martinmolema]

Sorry, but I have no experience whatsoever with this.