Question

我按照Plunker示例使用TinyMCE编辑器，但是当我尝试编译Angular 2 typescripts项目时出错。

我发布了以下代码的相关部分。

或者，您可以查看this plunkr了解详情。

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 {
    setTimeout(() => {
      this.controlName = this.elRef.nativeElement.getAttribute('ngControl');
      this.theControl = this.tinyMce.form.controls[this.controlName];
    });
    this.elRef.nativeElement.setAttribute('tiny-id', this.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);
    }
  }
}

错误如下：

'ControlGroup。
未找到tinymce。

请帮忙。

谢谢。

Answer 1

我花了很多时间试图找出解决方案，如何在Angular 2 RC和TypeScripts中的Web应用程序中实现TinyMCE编辑器。我从其中一个博客获得了Plunker的链接，我尝试了但是有错误。当我在我的项目中实现tiny-editor.ts并编译时，我得到了错误属性'form'在类型'ControlGroup上不存在。我修好了它。

这是固定的代码和步骤。

集成TinyMce程序集文件。您可以直接从官方API链接拨打电话或从NPM或Bower下载包到您当地的机器项目。
1. 将tiny-editor.ts放在共享文件夹中，无论如何都放在项目文件夹中。
2. 请将tiny-editor.ts包含在要显示编辑器的通信组件中。请！请勿在组件文件中忘记指令。最后，将html标记放在HTML文件。

在这里你去固定版本。我试过，它就像一个冠军。请帮助绿色，如果这有助于你！

快乐的编码！：）

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

declare var tinymce: any;
@Directive({
  inputs: ['tinyMce'],
  selector: '[tinyMce]'
})
export class TinyEditor {
  public tinyMce: ControlGroup;

  private id: string = Math.random().toString(36).substr(2, 5);
  private controlName: string;
  private theControl: any;

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

  public ngOnInit(): void {
    setTimeout(() => {
      this.controlName = this.elRef.nativeElement.getAttribute('ngControl');
      this.theControl = this.tinyMce.controls[this.controlName];
    });
    this.elRef.nativeElement.setAttribute('tiny-id', this.id);
  }

  public ngAfterViewInit(): void {
    this.zone.runOutsideAngular(() => {
      tinymce.init({
        valid_elements: '*[*]',
        selector: '[tiny-id=' + this.id + ']',
        schema: 'html5',
        height: 150,
        language : "en", // change language here
        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);
    }
  }
}

在实现TinyMCE编辑器时，属性'form'在类型'ControlGroup上不存在

1 个答案: