CODEWITHSUNDEEP
angularckeditor
Zafrul Hassan
Zafrul Hassan

Reputation: 173

Latest Angular2 version with CKEditor setup

When I try to run the given sample code, I am getting this exception:

ckEditor.component.ts: Property 'content' does not exist on type 'CkEditorComponent'. Is there any wrong in importing CKeditor. Most of the plunkr examples and sample programs are on old angular2. With latest angular2 I am having the above error.

Before that I was also getting exception for this.content inside component constructor, saying its not defined

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);

Upvotes: 0

Views: 805

Answers (1)

Alex Kojin
Alex Kojin

Reputation: 5214

Instead of this.content you should use this.ckeditorContent variable. Because you bind ckeditorContent variable to ckeditor component.

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

Add ckeditorContent variable to your component

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

Upvotes: 1

Related Questions