I am a newbie in Angular4

I want to integrate CKeditor in Angular4

As i follow this url but it's for Angular 2 not working in Angular 4.

As i have check there

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

but there is no any option for System.config in Angular 4

Then i have integrated froala but it gives licence error and also not allow to configure and i tried but it's not effecting

How can i integrate CKeditor in Angular4?

I am a newbie in Angular4

I want to integrate CKeditor in Angular4

As i follow this url but it's for Angular 2 not working in Angular 4.

As i have check there

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

but there is no any option for System.config in Angular 4

Then i have integrated froala but it gives licence error and also not allow to configure and i tried but it's not effecting

How can i integrate CKeditor in Angular4?

• javascript
• angular
• ckeditor

• what is the error you are you getting ? most often if it fits in A2 , fits in A4 too – Rahul Singh Commented Sep 1, 2017 at 5:55
• where to set System.config? – Nitin Commented Sep 1, 2017 at 6:01

1 Answer 1

I assume you use angular-cli to create your angular 4 project , you dont need system.config in angular-clli, that only used in system.js, and the code you have there is telling system.js where to find the ckeditor module. in case you not clear, just check whether your project have an 'angular-cli.json' file, if there is, then you can follow the below steps:

1. use npm install ng2-ckeditor to install the ng2-ckeditor
2. in your app.module.ts, you should have something like this

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

@NgModule({
  declarations: [
    AppComponent
  ],

  imports: [
    BrowserModule,
    CKEditorModule,
    FormsModule
  ],

  providers: [],

  bootstrap: [AppComponent]
})

export class AppModule { }

and then

3. in your index.html add

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

inside head section. alternatively, you can save the js file inside your project, then insde .angular-cli.json file, add the file of that file into scripts array

then you are good to use ckeditor in your angular 4 project