在Angular 2中使用TinyMCE組件的錯誤

Question

我是Agular 2中的新手，我試圖在我的項目中使用TinyMCE編輯器。

我也跟着，以創建和使用TinyMCE的組件此指令：https://www.tinymce.com/docs/integrations/angular2/

以下步驟後，我不能讓TinyMCE的工作，我得到以下錯誤：

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'elementId' since it isn't a known property of 'simple-tiny'.

1. If 'simple-tiny' is an Angular component and it has 'elementId' input, then verify that it is part of this module.
2. If 'simple-tiny' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

這是我的代碼：

微小-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 { } 

不知道的建設者問題，也可能是角CLI？

Answer 1

不知道爲什麼你在TinyMCE的配置使用jQuery

selector: `#${this.elementId}`, 

的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> 

希望這個hel PS。乾杯。