CODEWITHSUNDEEP
angularfroala
kishdude
kishdude

Reputation: 103

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

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?

Upvotes: 1

Views: 1521

Answers (2)

kishdude
kishdude

Reputation: 103

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": (e:any) => {
        this.editor = e.getEditor()
      }
    }
  }
}

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

Upvotes: 3

pburczyn
pburczyn

Reputation: 118

another way

<div (froalaInit)="initializeEditor($event)"></div>

public initializeEditor(e) {
  e.initialize();
  const editor = e.getEditor();
  /* ... */
}

Upvotes: 4

Related Questions