Novel Preposterous Mockery

    ngx-ckeditor4
    TypeScript icon, indicating that this package has built-in type declarations

    11.0.0 • Public • Published

    NGX-CKEDITOR 4

    npm Downloads TypeScript GitHub license

    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

    License

    License inherits Ckiditor's LGPL agreement,Licensed under the terms of LGPL. For full details about the license, please check the LICENSE file.

    Install

    npm i ngx-ckeditor4

    DownloadsWeekly Downloads

    28

    Version

    11.0.0

    License

    LGPL-2.1

    Unpacked Size

    167 kB

    Total Files

    26

    Last publish

    Collaborators

    • -kain