最新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>`; 
}