Question

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

集成

我选择了tinymce，但我不知道如何安装它

我找到了类似的东西：

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

Answer 1

`Working Plunker`

使用 ngForm，ControlGroup，NgZone：实施指令类似的内容

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>

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

如何安装angular2项目的tinymce？

1 个答案:

`Working Plunker`