Добавление текста в froala в Angular 4

У меня есть редактор 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?


typescript angular html froala
person cosmo    schedule 23.01.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Пожалуйста, попробуйте использовать встроенный класс рендеринга angular.

constructor(private renderer:Renderer) {}

@ViewChild('divvy') divvy:ElementRef;

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

}

person Nour    schedule 23.01.2018
comment
Я попробовал это, он просто добавил div «Hello There» внизу моего редактора froala. - person cosmo; 23.01.2018

arrow_upward
0
arrow_downward

Решил это, просто назначив переменную editorContent чему-то в машинописном тексте:

ngOnInit() {
    this.editorContent = <p>Hello!</p>
}
person cosmo    schedule 29.01.2018