CODEWITHSUNDEEP
angularckeditorangular-cli
Inigo
Inigo

Reputation: 8685

CKeditor component with angular2 angular cli

I am trying run ckeditor with Angular2. I'm using the Angular CLI, and I have a very basic working app.

I have intstalled this package using npm install ng2-ckeditor. I have set my system.config.js file exactly as per their example, ie:

System.config({
    "map": {
      "ng2-ckeditor": "npm:ng2-ckeditor",
    },
    "packages": {
      "ng2-ckeditor": {
        "main": "lib/index.js",
        "defaultExtension": "js",
      },
    }
  });

and included it in my app.modules.ts in the same way:

import { CKEditorModule } from 'ng2-ckeditor';

@NgModule({
  // ...
  imports:      [
    CKEditorModule
  ],
  // ...
})
export class AppModule { }

After running ng build and ng serve I get the following error in my console:

Unexpected value 'CKEditorModule' imported by the module 'AppModule'

I don't understand why?

Upvotes: 3

Views: 3868

Answers (1)

Thierry
Thierry

Reputation: 499

I found a way to this problem:

  1. In your index.html just add this in the header block:

<script src="https://cdn.ckeditor.com/4.6.1/full/ckeditor.js"></script>

  1. Install ng2-ckeditor via NPM

    npm install ng2-ckeditor --save

  2. In your app.component.ts add this:

    import { CKEditorComponent } from '../../../node_modules/ng2-ckeditor/src/ckeditor.component'; @NgModule({ declarations: [ CKEditorComponent ], exports: [ CKEditorComponent, ] })

  3. Use editor like this:

    <ckeditor [(ngModel)]="myContent" debounce="500"></ckeditor>

Upvotes: 6

Related Questions