在 Angular 4 中向 froala 添加文本

Question

我有一个 froala 编辑器，我想在其中添加一些文本。到目前为止，我已经尝试使用 innerhtml:

HTML

<div id="notesDiv" #divvy [froalaEditor]="options" [(froalaModel)]="editorContent">
</div>

打字稿

@ViewChild('divvy') divvy:ElementRef;
toAppend: string = '<p>Hi there!</p>';
this.divvy.nativeElement.innerHTML = this.toAppend;

这里的问题是，虽然它附加了 html，但它完全删除了编辑器。

它的作用：

我想要的：

在文档中有一个方法：

$('.selector').froalaEditor('html.set', '<p>My custom paragraph.</p>');

angular4/typescript有没有办法做到这一点？

Answer 1

请尝试使用内置渲染器 angular class。

constructor(private renderer:Renderer) {}

@ViewChild('divvy') divvy:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.divvy.nativeElement', insertAdjacentHTML' ['beforeend', '<div>Hello There</div>']);

}

Answer 2

只需将 editorContent 变量分配给 typescript 中的内容即可解决此问题：

ngOnInit() {
    this.editorContent = <p>Hello!</p>
}

在 Angular 4 中向 froala 添加文本

Adding text to froala in Angular 4

html

typescript

froala

angular