Question

我在 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() 方法？

Answer 1

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

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

Answer 2

另一种方式

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

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

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

2 个答案: