Ich kann meinen HTML-Inhalt im TinyMCE-Textbereich nicht anzeigen

Question

Ich versuche, einen Rich-Text-Editor für das Modal meiner Anwendung zu erstellen, indem ich tinymce anstelle des Textbereichs verwende. Aber mein HTML-Code kann nicht als Text im Rich-Text-Inhaltsbereich angezeigt werden. Ich bin mit Angular 2.

Jede mögliche Hilfe

import { Component, AfterViewInit, OnDestroy, Input, Output, EventEmitter } from 'angular2/core'; 
 
import { RdComponent, RdLib } from '../../../../../node_modules/mulberry/core'; 
 

 
declare let tinymce: any; 
 

 
@Component({ 
 
    selector: 'mail-template', 
 
    template: ` 
 
      <textarea style="height:15em"><p>{{ content }}</p></textarea>    
 
      ` 
 
}) 
 
export class MailTemplatesComponent extends RdComponent { 
 

 
    @Input("rd-model") model: string; 
 

 
    @Output() onEditorKeyup = new EventEmitter<any>(); 
 
    public editor: any; 
 

 
    ngAfterViewInit() { 
 
    console.log(this.model); 
 
    tinymce.init({ 
 
     selector: 'textarea', 
 
     setup: editor => { 
 
     this.editor = editor; 
 
     editor.on('keyup',() => { 
 
      const content = editor.getContent(); 
 
      this.onEditorKeyup.emit(content); 
 
     }) 
 
     } 
 
    }); 
 
    } 
 

 
    ngOnDestroy() { 
 
    tinymce.remove(this.editor); 
 
    } 
 

 
}

<div class="col-md-12"> 
 
    <rd-field [rd-text]="translate('Mail İçeriği')"></rd-field> 
 
    <mail-template [(rd-model)]="data.MailContent" rd-height="25em"></mail-template> 
 
</div>

Answer 1

Ich habe eine beste Lösung für das Problem gefunden und ich denke, es wäre hilfreich für die Leute, die das gleiche Problem erlebt.

http://estynedwards.com/blog/2015/12/04/getting%20started%20with%20angular%202/

Answer 2

Ich bin mit angular2-froala-wyswiyg appriciated

dies ist das Beste, was ich konnte, finden und einfach zu bedienen (link unten)

https://libraries.io/npm/angular2-froala-wyswiyg#usage

npm install angular-froala-wysiwyg --save 
npm update froala-editor --save 

package.json (Datei) nach der Installation des Moduls

"dependencies": { 
    ..... 
    "angular-froala-wysiwyg": "^2.7.2", 
    ... 
} 

Importe in Ihrem Modul

import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg'; 
... 

@NgModule({ 
    ... 
    imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ], 
    ... 
}) 

Winkel cli.json (Datei) Änderungen in Stile und Skripte wie unten

"styles": [ 
    "styles.css", 
    "../node_modules/froala-editor/css/froala_editor.pkgd.min.css", 
    "../node_modules/froala-editor/css/froala_style.min.css", 
    "../node_modules/font-awesome/css/font-awesome.css" 
    ], 
    "scripts": [ 
    "../node_modules/froala-editor/js/froala_editor.pkgd.min.js" 
    ], 

In Ihrer Komponente Vorlage

<textarea class="form-control" [froalaEditor] name="x" #x="ngModel [(ngModel)]="obj.name" required ></textarea> 

zeigt es Nach der Bearbeitung gezeigt als

<span [innerHTML]="obj.name"> </span>