https://github.com/yabab-dev/ng2-ckeditor

Angular2 CKEditor component
https://github.com/yabab-dev/ng2-ckeditor

angular ckeditor ckeditor-component

Last synced: 11 days ago
JSON representation

Angular2 CKEditor component

• Host: GitHub
• URL: https://github.com/yabab-dev/ng2-ckeditor
• Owner: yabab-dev
• License: mit
• Created: 2016-02-03T22:40:34.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T03:32:49.000Z (almost 2 years ago)
• Last Synced: 2024-05-22T04:28:58.277Z (6 months ago)
• Topics: angular, ckeditor, ckeditor-component
• Language: TypeScript
• Size: 836 KB
• Stars: 359
• Watchers: 20
• Forks: 95
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular-components - ng2-ckeditor-codemirror - Angular2 CKEditor component. (Uncategorized / Uncategorized)

README

        
# Angular - CKEditor component

Use the [CKEditor (4.x)](http://ckeditor.com/) wysiwyg in your Angular application.

[**Demo**](https://stackblitz.com/edit/ng2-ckeditor)

### Installation

* Include CKEditor javascript files in your application :

```

```

* Install ng2-ckeditor

  * JSPM : `jspm install npm:ng2-ckeditor`

  * NPM : `npm install ng2-ckeditor`

  * YARN: `yarn add ng2-ckeditor`

* Install @types/ckeditor

  * JSPM : `jspm install npm:@types/ckeditor`

  * NPM : `npm install --save @types/ckeditor`

  * YARN : `yarn add @types/ckeditor`

* SystemJS Config :

```javascript

System.config({

  map: {

    'ng2-ckeditor': 'npm:ng2-ckeditor',

  },

  packages: {

    'ng2-ckeditor': {

      main: 'lib/index.js',

      defaultExtension: 'js',

    },

  },

});

```

* Please consider usage of the plugin `divarea` of CKEditor (see [Issues](#issues))

### Sample

Include `CKEditorModule` in your main module :

```javascript

import { CKEditorModule } from 'ng2-ckeditor';

import { FormsModule } from '@angular/forms';

@NgModule({

  // ...

  imports: [CKEditorModule, FormsModule],

  // ...

})

export class AppModule {}

```

Then use it in your component :

```javascript

import { Component } from '@angular/core';

@Component({

  selector: 'sample',

  template: `

  

    (ready)="onReady($event)"

    (focus)="onFocus($event)"

    (blur)="onBlur($event)"

    (contentDom)="onContentDom($event)"

    (fileUploadRequest)="onFileUploadRequest($event)"

    (fileUploadResponse)="onFileUploadResponse($event)"

    (paste)="onPaste($event)"

    (drop)="onDrop($event)"

    debounce="500">

  

  `,

})

export class Sample {

  ckeditorContent: string = '
Some html
';

}

```


### Configuration

* `config` : The configuration object for CKEditor see http://docs.ckeditor.com/#!/api/CKEDITOR.config

* `debounce` : You can add a delay (ms) when updating ngModel

* `readonly` : Enabled / disable readonly on editor

### Toolbar Directives

You can use the following directives to add custom buttons to CKEditor's toolbar and organize them into groups.

For more info about CKEditor's Toolbar API refer to http://docs.ckeditor.com/#!/api/CKEDITOR.ui

* `` : Note that the `name` and `command` attributes are mandatory for this one.

```javascript

    

    

```

* `` : Can be used to organize multiple buttons into groups.

```javascript

    

        

        

    

```

### Issues

* [with ngFor](https://github.com/chymz/ng2-ckeditor/issues/23)

* [[CKEDITOR] Error code: editor-destroy-iframe](https://github.com/chymz/ng2-ckeditor/issues/24)

### Licence

See `LICENSE` file