# ng2-ckeditor

> Angular CKEditor component

Latest version **1.3.7** (published 2022-08-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-ckeditor
pnpm add ng2-ckeditor
yarn add ng2-ckeditor
bun add ng2-ckeditor
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.7 |
| Published | 2022-08-13 |
| First published | 2016-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 121.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 355 |
| Author | Simon Babay |
| Maintainers | chymz |
| Keywords | angular, component, ckeditor, wysiwyg |

## Links

- npm: https://www.npmjs.com/package/ng2-ckeditor
- Repository: https://github.com/chymz/ng2-ckeditor
- Homepage: https://github.com/chymz/ng2-ckeditor#readme
- Issues: https://github.com/chymz/ng2-ckeditor/issues
- npm.io page: https://npm.io/package/ng2-ckeditor

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.3.7 (latest) — 2022-08-13
- 1.3.6 — 2022-01-19
- 1.3.5 — 2022-01-12
- 1.3.4 — 2021-06-18
- 1.3.3 — 2021-02-09
- 1.3.2 — 2021-02-07
- 1.3.1 — 2020-12-15
- 1.3.0 — 2020-12-14
- 1.2.9 — 2020-07-28
- 1.2.8 — 2020-07-26
- 1.2.7 — 2020-03-01
- 1.2.6 — 2019-09-19
- 1.2.5 — 2019-09-19
- 1.2.4 — 2019-07-24
- 1.2.3 — 2019-05-30
- … 25 more at https://npm.io/package/ng2-ckeditor/versions

## README

# Angular - CKEditor component

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

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

### <a name="install"></a>Installation

* Include CKEditor javascript files in your application :

```
<script src="https://cdn.ckeditor.com/4.19.1/full-all/ckeditor.js"></script>
```

* 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))

### <a name="sample"></a>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: `
  <ckeditor
    [(ngModel)]="ckeditorContent"
    [config]="{uiColor: '#99000'}"
    [readonly]="false"
    (change)="onChange($event)"
    (editorChange)="onEditorChange($event)" <!-- CKEditor change event -->
    (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">
  </ckeditor>
  `,
})
export class Sample {
  ckeditorContent: string = '<p>Some html</p>';
}
```

### <a name="config"></a>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

### <a name="toolbar"></a>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

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

```javascript
<ckeditor
  [(ngModel)]="ckeditorContent">
    <ckbutton [name]="'saveButton'"
      [command]="'saveCmd'"
      (click)="save($event)"
      [icon]="'save.png'"
      [label]="'Save Document'"
      [toolbar]="'clipboard,1'">
    </ckbutton>
</ckeditor>
```

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

```javascript
<ckeditor
  [(ngModel)]="ckeditorContent">
    <ckgroup
      [name]="'documenthandling'"
      [previous]="'1'">
        <ckbutton .... ></ckbutton>
        <ckbutton .... ></ckbutton>
    </ckgroup>
</ckeditor>
```

### <a name="issues"></a>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)

### <a name="licence"></a>Licence

See `LICENSE` file

---
_Source: https://npm.io/package/ng2-ckeditor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._