Ngx-ckeditor4 NPM

NGX-CKEDITOR 4

NPM Package

To add ngx-ckeditor4 library to your package.json use the following command.

npm install ngx-ckeditor4 --save

As the library is using ckeditor you will need to add node_modules/ckeditor/** to your application assets.

Set angular.json

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

If you are using Angular CLI you can follow the angular.json example below...

Configuration

You must import NgxCkeditorModule inside your main application module (usually named AppModule) with forRoot to be able to use ckeditor component.fileUploadRequest(event) & fileUploadResponse(event) is general definition.

@NgModule({
  imports: [
    NgxCkeditorModule.forRoot({
      url: 'https://cdn.bootcss.com/ckeditor/4.11.3/ckeditor.js',
      config: {
        filebrowserUploadMethod: 'xhr',
        filebrowserUploadUrl: 'http://127.0.0.1:8000/index/index/uploads',
      },
    }),
  ],
})
export class AppModule {
}

You can also use CDN from cdn.ckeditor.com,The URL structure for CKEditor 4 is as follows:

https://cdn.ckeditor.com/[version.number]/[distribution]/ckeditor.js

Custom Event

this.ckeditorService.fileUploadRequest = (event) => {
  try {
    const fileLoader = event.data.fileLoader;
    const formData = new FormData();
    const xhr = fileLoader.xhr;
    xhr.withCredentials = true;
    xhr.open('POST', fileLoader.uploadUrl, true);
    formData.append('image', fileLoader.file, fileLoader.fileName);
    fileLoader.xhr.send(formData);
    event.stop();
  } catch (e) {
    console.warn(e);
  }
};

this.ckeditorService.fileUploadResponse = (event) => {
  try {
    event.stop();
    const data = event.data;
    const xhr = data.fileLoader.xhr;
    const response = JSON.parse(xhr.responseText);
    if (response.error) {
      data.message = 'upload fail';
      event.cancel();
    } else {
      data.url = 'http://127.0.0.1:8000/uploads/' + response.data.save_name;
    }
  } catch (e) {
    console.warn(e);
  }
};

Template

In HTML Template

<!-- Basic Use -->
 <ngx-ckeditor [(ngModel)]="text" [inline]="inline" [disabled]="disabled"></ngx-ckeditor>

<!-- Set Config & Locale -->
<ngx-ckeditor [(ngModel)]="text" [config]="config" [locale]="locale"></ngx-ckeditor>

<!-- In Forms -->
<ngx-ckeditor formControlName="text"></ngx-ckeditor>

<!-- On Event -->
<ngx-ckeditor [(ngModel)]="text" 
              (ready)="ready($event)"
              (focus)="focus($event)"
              (blur)="blur($event)"
              (fileUploadRequest)="fileUploadRequest($event)"
              (fileUploadResponse)="fileUploadResponse($event)"></ngx-ckeditor>

Component

NgxCkeditorComponent

@Input() id: string editor ID
@Input() locale: string editor language, en_us => en, zh_cn => zh-CN, support dynamic
@Input() config: any = {} editor config, support dynamic
@Input() inline: boolean editor inline mode, support dynamic
@Input() fileUploadRequestCustom = false editor turn on customization fileUploadRequest
@Input() fileUploadResponseCustom = false editor turn on customization fileUploadResponse
@Output() ready: EventEmitter<EventInfo> editor on events ready
@Output() focus: EventEmitter<EventInfo> editor on events focus
@Output() blur: EventEmitter<EventInfo> editor on events blur
@Output() fileUploadRequest: EventEmitter<EventInfo> editor on events fileUploadRequest
@Output() fileUploadResponse: EventEmitter<EventInfo> editor on events fileUploadResponse