typescript – angular2 wysiwyg tinymce实现和双向绑定

发布时间：2020-12-17 10:18:59 所属栏目：安全来源：网络整理

导读：嗨,我正在尝试将tinymce实现为一个角度2组件,用于创建新线程的小型论坛. 我希望textarea(tinymce)的内容被双向绑定到组件内的变量.到目前为止,提交按钮有效,但keyup事件没有. export class ForumNewThreadComponent implements OnInit{ constructor(){} ngOn

嗨,我正在尝试将tinymce实现为一个角度2组件,用于创建新线程的小型论坛.
我希望textarea(tinymce)的内容被双向绑定到组件内的变量.到目前为止,提交按钮有效,但keyup事件没有.

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

并查看

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

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

我会为此实现一个自定义值访问器：

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

我会这样用它：

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

</textarea>

并在您的组件类中：

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

  text:string;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!