typescript双向绑定-Angular2所见即所得的tinymce实现和

本文主要介绍typescript-angular2 wysiwyg tinymce实现以及单向绑定。 对于你现在的搜索和搜索问题还是有很好的参考价值的。 希望《编程之家》小编整理的这篇内容对您有所帮助。 如果有错误或没有充分考虑的事情，请告诉我。

您好typescript双向绑定，我正在尝试将tinymce实现为用于创建新线程的大型峰会的角度2组件。

我希望将文本区域（tinymce）的内容单向绑定到组件内的变量。 到目前为止，提交按键有效typescript双向绑定，但键盘风暴无效。

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();
  }
}

并查看

    {{getValue}}
        
    Submit
  

因此，我将实现一个自定义值访问器：

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());
  }
}

我会这样使用它：

在你的组件类中：

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