最新Angular2版本的CKEditor设置

Question

当我尝试运行指定的示例代码，我得到这个异常：

ckEditor.component.ts：房产“内容”不上键入“CkEditorComponent”存在。进口CKeditor有没有问题？大多数plunkr示例和示例程序都在旧的angular2上。用最新的angular2我有上面的错误。

在这之前，我也越来越例外this.content内部的元件构造，称其没有定义

ckEditor.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'ck-editor', 
    template: ` 
    <ckeditor 
    [(ngModel)]="ckeditorContent" 
    [config]="{uiColor: '#99000'}" 
    (change)="onChange($event)" 
    (ready)="onReady($event)" 
    (focus)="onFocus($event)" 
    (blur)="onBlur($event)" 
    debounce="500"> 
    </ckeditor> 
    ` 
}) 
export class CkEditorComponent{ 
constructor(){ 
    this.ckeditorContent = `<p>My HTML</p>`; 
    } 
} 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { CKEditorModule } from 'ng2-ckeditor'; 


import { CkEditorComponent } from './ckEditor.component'; 


@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule,CKEditorModule 
    ], 
    declarations: [ 
     CkEditorComponent 
    ], 
    bootstrap: [CkEditorComponent] 
}) 
export class AppModule { } 

main.ts个

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

system.config.js

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 
     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
     '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 
     // other libraries 
     'rxjs': 'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
     'ng2-ckeditor': 'npm:ng2-ckeditor', 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js',  
     defaultExtension: 'js' 
     }, 
     'ng2-ckeditor': { 
       defaultExtension: 'js' 
      }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    map: { 
      "ng2-ckeditor": "node_modules/ng2-ckeditor/lib/ckeditor.component.js" 
     } 
    }); 
})(this); 

Answer 1

相反的this.content你应该使用this.ckeditorContent变量。 因为您将ckeditorContent变量绑定到ckeditor组件。

<ckeditor 
[(ngModel)]="ckeditorContent" 
... 

添加ckeditorContent变量您的组件

export class CkEditorComponent{ 
    ckeditorContent = `<p>My HTML</p>`; 
}