How ckeditor.js can be bundled in the application

[PACMAN49]

How can we provide ckeditor.js to systemjs module loader so it can be bundeled with the application ?

[yabab-dev]

I think you can't, the ckeditor 4.x doesn’t support JS modules atm.

Ckeditor team have fully rewrited their module, and JS modules are supported in 5.x, but still in alpha : https://ckeditor5.github.io/

[Reinmar]

You're right. CKEditor 4 would need to be wrapped into a ES6 module (should be a fairly simple task).

As for CKEditor 5, by coincidence, I've just wrote a few things on how the build process looks like and possible use case – ckeditor/ckeditor5#345. Curious to have your opinion there.

EDIT (May 4 2017): This is outdated. We dropped a custom build process and now rely fully on Webpack or other bundlers. To see example Webpack configs check ckeditor/ckeditor5#139.

[a2un]

When will the ckeditor5 be available for angular 4 and typescript

[Reinmar]

If you want to get your hands a bit dirty, you can integrate CKEditor 5 into your Angular app quite easily straight from source: https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/advanced-setup.html

There's a topic about CKEditor 5's compatibility with Angular. It's generally compatible, but there's a problem if you use Angular CLI.

[a2un]

Hey..
I could bundle my project with ckeditor4 js files in my angular4 app that uses angular webpack bundler, when i was trying it today

[SiddharthBhutoria]

@a2un Can you tell what did you do to make it work?

[l443018]

Use angular cli^1.6.6, and this is work for me:

$ yarn add ng2-ckeditor
$ yarn add ckeditor

angular-cli.json

{
  "apps": [
    {
      "assets": [
        "assets",
        { "glob": "**/*", "input": "../node_modules/ckeditor/", "output": "./assets/scripts/ckeditor/" }
      ],
....

index.html

<script src="./assets/scripts/ckeditor/ckeditor.js"></script>

custom-editor.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CKEditorModule } from 'ng2-ckeditor';
import { CustomEditorComponent } from './note-editor.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CKEditorModule,
  ],
  declarations: [
    CustomEditorComponent,
  ],
  exports: [
    CustomEditorComponent,
  ]
})
export class CustomEditorModule { }