带有 CKEditor 设置的最新 Angular2 版本

Question

当我尝试运行给定的示例代码时，出现了这个异常：

ckEditor.component.ts: 属性 'content' 在类型 '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.ckeditorContent 变量而不是 this.content。因为您将 ckeditorContent 变量绑定到 ckeditor 组件。

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

将 ckeditorContent 变量添加到您的组件

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

带有 CKEditor 设置的最新 Angular2 版本

Latest Angular2 version with CKEditor setup

ckeditor

angular