如何在 angular 11 中访问 froala 编辑器中的编辑器？

问题描述

我在 angular 11 中使用 froala 编辑器。我可以让编辑器运行，但是如何访问我的 component.ts 文件中的编辑器？

这是我的 html 代码：

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

这是我的 component.ts 文件中的代码：从'@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() {

  }
}

例如，在 didInitialize() 函数中，如何获取编辑器的引用以执行 fullscreen.toggle() 方法？

解决方法

所以我想出了这个。修改后的代码如下：

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()
      }
    }
  }
}

关键是在初始化的函数中有一个 any 类型的参数，然后在这个参数上调用 getEditor()。

另一种方式

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

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

angular froala