typescript - 如何安装带有angular2项目的tinymce？

Question

我需要将编辑器与我的项目 angular2 集成

我选择了tinymce但是我不知道怎么安装

我发现了类似的东西:

tinymce.init({
    selector: '.tinymce-editor',
    schema: 'html5',
  });

Answer 1

Working Plunker

使用ngForm、ControlGroup、NgZone:实现一个Directive这样的东西

import {ElementRef, Directive, NgZone} from '@angular/core';
import {ControlGroup, Control} from '@angular/common';

@Directive({
  inputs: ['tinyMce'],
  selector: '[tinyMce]'
})
export class TinyEditor {
  public tinyMce: ControlGroup;
  private zone: NgZone;
  private id: string = Math.random().toString(36).substr(2, 5);
  private controlName: string;
  private theControl: Control;

  public constructor(private elRef: ElementRef, private zone: NgZone) {
  }

  public ngOnInit(): void {
    this.zone.runOutsideAngular(() => {
      this.controlName = this.elRef.nativeElement.getAttribute('ngControl');
      this.theControl = this.tinMce.find(this.controlName);
      this.elRef.nativeElement.setAttribute('tiny-id', id);
    });
  }

  public ngAfterViewInit(): void {
    this.zone.runOutsideAngular(() => {
      tinymce.init({
        valid_elements: '*[*]',
        selector: '[tiny-id=' + this.id + ']',
        schema: 'html5',
        height: 400,
        setup: (editor): void => {
          editor.on('keyup change', () => {
            this.zone.run(() => {
              let value: Object = editor.getContent();
              this.theControl.updateValue(value, {emitEvent: true});
              this.theControl.markAsDirty();
              this.theControl.markAsTouched();
              this.theControl.updateValueAndValidity();
            });
          });
        }
      });
    });
  }

  public ngOnDestroy(): void {
    try {
      tinymce.remove('[tiny-id=' + this.id + ']');
    } catch(e) {
      console.error('Error:', e);
    }
  }
}

用法:

<form #f="ngForm">
  <input [tinyMce]="f" ngControl="valueHolder">
</form>

通过这种方式，您还可以在单​​个页面上拥有任意数量的实例。