[英]Error using TinyMCE component in Angular 2
I'm new in Agular 2 and I'm trying to use the TinyMCE editor on my project. 我是Agular 2的新手,我正在尝试在项目中使用TinyMCE编辑器。
I followed this instructions in order to create and use the tinyMCE component: https://www.tinymce.com/docs/integrations/angular2/ 我遵循以下说明来创建和使用tinyMCE组件: https ://www.tinymce.com/docs/integrations/angular2/
After following the steps, I can't make TinyMCE work, I get the following error: 完成上述步骤后,我无法使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'. 错误错误:未被捕获(承诺):错误:模板解析错误:无法绑定到'elementId',因为它不是'simple-tiny'的已知属性。
- If 'simple-tiny' is an Angular component and it has 'elementId' input, then verify that it is part of this module. 如果'simple-tiny'是Angular组件,并且具有'elementId'输入,则请验证它是否是此模块的一部分。
- If 'simple-tiny' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 如果“ simple-tiny”是Web组件,则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 要允许任何属性,请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。 (" (”
This is my code: 这是我的代码:
tiny-editor.component.ts 微小-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 parent.component.html
<simple-tiny [elementId]="'descripcion'" (onEditorContentChange)="keyupHandler($event)"></simple-tiny>
I already imported the component to the app.module.ts . 我已经将组件导入到app.module.ts中 。
I already added the scripts to the angular-cli.json . 我已经将脚本添加到angular-cli.json中 。
I'm using TinyMCE version 4.5.6 我正在使用TinyMCE版本4.5.6
What am I missing? 我想念什么?
Here's my app.module.ts. 这是我的app.module.ts。 I'm using a template. 我正在使用模板。 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 { }
Not sure about the builder question, could it be angular-cli? 不确定建造者的问题,可能是角度倾斜吗?
The elementId refers to the HTML element you want to wrap to the editor, and is received in the Directive as an @Input parameter. elementId表示要包装到编辑器的HTML元素,并且在Directive中作为@Input参数接收。 Try just using: 尝试仅使用:
selector: '#' + this.elementId,
It would be 这将是
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);
});
}
});
}
If this still not works, please try using a default select identifier, ie 如果仍然无法使用,请尝试使用默认的选择标识符,即
select: '#wysiwygEditor',
And in the HTML 并在HTML中
<simple-tiny id="wysiwygEditor" (onEditorContentChange)="keyupHandler($event)"></simple-tiny>
Hope this helps. 希望这可以帮助。 Cheers. 干杯。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.