angular2 wysiwyg tinymce Implementierung und 2-Wege-Bindung

Question

Hi Ich versuche, Tinymce in eine eckige 2-Komponente für ein kleines Forum zu implementieren, um einen neuen Thread zu erstellen. Ich möchte den Inhalt der Textarea (tinymce) 2-way-binded zu einer Variablen innerhalb der Komponente. Bisher funktioniert der Submit-Button, das Keyup-Event jedoch nicht.

export class ForumNewThreadComponent implements OnInit{ 

    constructor(){} 
    ngOnInit():any { 
    tinymce.init(
     { 
     selector: ".tinyMCE", 
     }) 
    } 

text:string; 
    submit(){ 
    this.text = tinymce.activeEditor.getContent(); 
    } 
    getTinymceContent(){ 
    this.text = tinymce.activeEditor.getContent(); 
    } 
} 

und Blick

<div class="thread-body"> 
    {{getValue}} 
    <textarea class="tinyMCE" style="height:300px" (keyup)="getTinymceContent()"> 

    </textarea> 
    <button class="btn btn-primary" (click)="submit()">Submit</button> 
    </div> 

Answer 1

ich einen benutzerdefinierten Wert Accessor für diese implementieren würde:

const TINY_MCE_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TinyMceValueAccessor), multi: true}); 

@Directive({ 
    selector: 'textarea[tinymce]', 
    host: { '(keyup)': 'doOnChange($event.target)' }, 
    providers: [ TINY_MCE_VALUE_ACCESSOR ] 
}) 
export class DateValueAccessor extends DefaultValueAccessor { 
    @Input() 
    tinymce:any; 

    onChange = (_) => {}; 
    onTouched =() => {}; 

    writeValue(value:any):void { 
    if (value!=null) { 
     super.writeValue(value.toString()); 
    } 
    } 

    doOnChange(elt) { 
    this.onChange(this.tinymce.activeEditor.getContent()); 
    } 
} 

ich verwenden würde es so aus:

<textarea [tinymce]="tinymce" style="height:300px" [(ngModel)]="text"> 

</textarea> 

und in Ihrem Komponentenklasse:

@Component({ 
    (...) 
    directives: [ DateValueAccessor ] 
}) 
export class ForumNewThreadComponent implements OnInit{ 
    constructor(){} 
    ngOnInit():any { 
    tinymce.init({ 
     selector: "[tinymce]" 
    }) 
    } 

    text:string; 
} 

Answer 2

Oder tut es so, tmce des Änderungsereignis und NgZone mit

constructor(public zone:NgZone) {} 

ngOnInit():any { 
    tinymce.init(
     { 
     selector: ".tinyMCE", 
     setup: (ed) => { 
      ed.on('keyup change', (ed, l) => { 
      this.zone.run(()=> { 
       this.text = tinymce.activeEditor.getContent(); 
      }); 
      }); 

     } 
     }) 
    } 

Dies würde scheitern, wenn Sie mehr als eine Instanz auf tmce in einer Komponente. Setzen Sie diese Logik in eine Anweisung wie Thierry's Implementierung.

Answer 3

Ich weiß, das ist ein wenig alten Post. Aber nachdem ich über 2 Tage meinen Kopf kratzte. Ich konnte es endlich herausfinden und dachte, dass es für andere nützlich sein könnte. So teilt hier es

https://github.com/Abhijith-Nagaraja/tinymce-docs/blob/master/integrations/angular2.md#sample-directive-implementation-with-ngmodel-two-way-binding

Answer 4

Ich wollte sagen, dass ich die gleiche Umsetzung tat, wie oben erwähnt, aber ich kam in diesem seltsamen Fehler und schlug meinen Kopf herum und um diesen Fehler von 'cannot modify NodeName of Null' Fixierung, so schließlich ich heute Fehler behoben und ich wollte es teilen, damit die Leute nicht mehr nach dem Fehler suchen müssen. Ich weiß, dass dies ein alter Post ist, für den ich mich entschuldige.

1. erhalten Sie den Code von Github (Richtlinie). Link unten. danke @Abhijith Nagaraja für die Post.

https://github.com/Abhijith-Nagaraja/tinymce-docs/blob/master/integrations/angular2.md#sample-directive-implementation-with-ngmodel-two-way-binding

2. fügen zwei Variablen an die Richtlinie

private editor; 
private init: boolean = false; 

die Methode

writeValue(value: any): void { 
    // ... 
} 

zu

writeValue(value: any): void { 
    // This check is necessary because, this method gets called before editor gets initialised. 
    // Hence undefined/null pointer exceptions gets thrown 
    if (this.init) { 
     if (tinymce.get(this.selector)) { 
     tinymce.get(this.selector).setContent(value, {format: 'raw'}); 
     } 
    } 
} 

ersetzen in ValueOnChange(change: boolean) this.val = tinymce.activeEditor.getContent();

zu

umschreiben

if (tinymce.activeEditor) {   
    this.val = tinymce.activeEditor.getContent(); 
} 

Rewrite tinymce.init(options)

zu

tinymce.init(options).then(() => { 
    this.init = true; 
}); 

und zuletzt fügen Sie ein ngOnDestroy Methode

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

Diese den Fehler für mich gerichtet hat und auch für mich festgelegt, wenn der Editor schon war initialisiert und ich habe es wiederverwenden, es würde nicht kompilieren. aber jetzt wegen der ngOnDestroy ich jetzt den Editor zerstören und die afterViewInit werden sich erinnern, die tinymce.init