How do I get access to the editor in froala editor in angular 11?

Question

I'm using the froala editor in angular 11. I'm able to get the editor running, but how do I get access to the editor in my component.ts file?

Here is my html code:

<div [froalaEditor]="options"></div>

Here is the code in my component.ts file: import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})

export class AppComponent {
  title = 'my-app';

  public options: Object = {
    fullPage: true,
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'fontFamily', 'fontSize', '-', 'undo', 'redo','|', 'fullscreen'],
    events: {
      contentChanged: this.textChanged,
      click: this.didClick,
      initialized: this.didInitialize(),
    },
  };

  didInitialize() {
    console.log("initialized")
    editor.fullscreen.toggle()
  }

  textChanged() {

  }

  didClick() {

  }
}

For example, in the didInitialize() function, how to I get a reference to the editor to execute the fullscreen.toggle() method?

question from:https://stackoverflow.com/questions/66065788/how-do-i-get-access-to-the-editor-in-froala-editor-in-angular-11

Answer 1

So I figured this out. Here is the modified code:

import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app'
  editor:any

  public options: Object = {
    fullPage: true,
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'undo', 'redo','|', 'fullscreen'],
    events: {
      "initialized": function(e:any) {
        const editor = e.getEditor()
      }
    }
  }
}

The key was to have a parameter of type any in the initialed function and then call getEditor() on this parameter.