在 Angular 2 中使用 TinyMCE 组件时出错答案

【问题标题】：Error using TinyMCE component in Angular 2在 Angular 2 中使用 TinyMCE 组件时出错
【发布时间】：2017-04-13 20:45:12
【问题描述】：

我是 Agular 2 的新手，我正在尝试在我的项目中使用 TinyMCE 编辑器。

我按照以下说明创建和使用 tinyMCE 组件：https://www.tinymce.com/docs/integrations/angular2/

按照步骤操作后，我无法让 TinyMCE 工作，我收到以下错误：

ERROR 错误：未捕获（承诺）：错误：模板解析错误：无法绑定到“elementId”，因为它不是“simple-tiny”的已知属性。

如果“simple-tiny”是一个 Angular 组件并且它具有“elementId”输入，则验证它是该模块的一部分。

如果“simple-tiny”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

要允许任何属性将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 ("

这是我的代码：

tiny-editor.component.ts

import { Component, OnChanges, AfterViewInit, EventEmitter, OnDestroy, 
Input, Output } from '@angular/core';
import 'tinymce';
import 'tinymce/themes/modern';

declare var tinymce: any;

@Component({
  selector: 'simple-tiny',
  template: `<textarea id="{{elementId}}"></textarea>`
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: string;
  @Output() onEditorContentChange = new EventEmitter<any>();

  editor;

  constructor() { }

  ngAfterViewInit() {
    tinymce.init({
      selector: `#${this.elementId}`,
      skin_url: '../assets/skins/lightgray',
      plugins: ['link', 'paste', 'table'],
      setup: editor => {
        this.editor = editor;
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.onEditorContentChange.emit(content);
        });
      }
    });
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }

}

parent.component.html

<simple-tiny [elementId]="'descripcion'" (onEditorContentChange)="keyupHandler($event)"></simple-tiny>

我已经将组件导入到 app.module.ts。
我已经将脚本添加到 angular-cli.json。

我使用的是 TinyMCE 4.5.6 版

我错过了什么？

这是我的 app.module.ts。我正在使用模板。 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ng2-bootstrap/dropdown';
import { TabsModule } from 'ng2-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';

// Routing Module
import { AppRoutingModule } from './app.routing';

//Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';

//Modules
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule, RequestOptions } from '@angular/http';
import { AuthModule } from './auth/auth.module';

//Services
import { AuthGuard } from './auth/auth.guard';
import { AuthService } from './auth/auth.service';
import { PropertiesService } from './services/properties.service';
import { TypesService } from './services/types.service';

import { TinyEditorComponent } from './tiny-editor/tiny-editor.component';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    AuthModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  declarations: [
    AppComponent,
    FullLayoutComponent,
    SimpleLayoutComponent,
    NAV_DROPDOWN_DIRECTIVES,
    BreadcrumbsComponent,
    SIDEBAR_TOGGLE_DIRECTIVES,
    AsideToggleDirective,
    TinyEditorComponent
  ],
  providers: [
    {
    provide: LocationStrategy,
    useClass: HashLocationStrategy
    },
    AuthService,
    AuthGuard,
    PropertiesService,
    TypesService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

不确定构建器的问题，可以是 angular-cli 吗？

【问题讨论】：

您使用什么构建器来构建应用程序？
分享你的app.module.ts
@yurzui 我已经添加了 app.module.ts
@elpddev 我认为构建器是 angular-cli。

标签： angular tinymce

【解决方案1】：

elementId 是指要包装到编辑器的 HTML 元素，并在指令中作为 @Input 参数接收。尝试使用：

selector: '#' + this.elementId,

应该是

  ngAfterViewInit() {
    tinymce.init({
      selector: '#' + this.elementId,
      skin_url: '../assets/skins/lightgray',
      plugins: ['link', 'paste', 'table'],
      setup: editor => {
        this.editor = editor;
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.onEditorContentChange.emit(content);
        });
      }
    });
  }

如果还是不行，请尝试使用默认选择标识符，即

select: '#wysiwygEditor',

在 HTML 中

<simple-tiny id="wysiwygEditor" (onEditorContentChange)="keyupHandler($event)"></simple-tiny>

希望这会有所帮助。干杯。

【讨论】：