I would implement a custom value accessor for this:
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());
}
}
I would use it this way:
<textarea [tinymce]="tinymce" style="height:300px" [(ngModel)]="text">
</textarea>
and in your component class:
@Component({
(...)
directives: [ DateValueAccessor ]
})
export class ForumNewThreadComponent implements OnInit{
constructor(){}
ngOnInit():any {
tinymce.init({
selector: "[tinymce]"
})
}
text:string;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…