How to install a tinymce with angular2 project?

问题

I need to integrate an editor with my project angular2

i choose tinymce but I dont know how to install it

I found something like :

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

回答1:

Working Plunker

Using ngForm, ControlGroup, NgZone: Implement a Directive something like this

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

Usage:

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

This way you can also have as many instances as you want, on a single page.

来源：https://stackoverflow.com/questions/37855066/how-to-install-a-tinymce-with-angular2-project

标签

typescript

angular

tinymce