npm package: @ng-zi/extensions-ckeditor
Description: Wrapper Component for Ckeditor
Latest version: 0.0.20

# MtxCkeditor Component

The `MtxCkeditor` component is a wrapper around the CKEditor 5 WYSIWYG editor. It provides a rich text editing experience, combining all features of CKEditor 5 into a seamless Angular component.

## Table of Contents

- [MtxCkeditor Component](#mtxckeditor-component)
	- [Table of Contents](#table-of-contents)
	- [Installation](#installation)
	- [Basic Standalone Usage](#basic-standalone-usage)
		- [Importing the Module](#importing-the-module)
		- [Adding the Component to Templates](#adding-the-component-to-templates)
	- [Basic Module-Based Usage](#basic-module-based-usage)
	- [Features](#features)
	- [Customization](#customization)
		- [Example Configuration](#example-configuration)
	- [Accessibility](#accessibility)
	- [API](#api)
		- [Properties](#properties)
		- [Methods](#methods)
		- [Example Usage](#example-usage)
	- [Events](#events)
		- [Example Usage](#example-usage-1)
	- [Usage in Forms](#usage-in-forms)
		- [Template-Driven Forms](#template-driven-forms)
		- [Reactive Forms](#reactive-forms)
	- [Summary](#summary)

## Installation

To install this library, run:

```bash
npm install @ng-zi/extensions-ckeditor --save --force --legacy-peer-deps
```

## Basic Standalone Usage

To use the `MtxCkeditor` component, import the `MtxCkeditorModule` into your Angular application. Then, add the `MtxCkeditor` component to your templates.

### Importing the Module

```typescript
import { Component } from '@angular/core';
import { MtxCkeditorModule } from '@ng-zi/extensions-ckeditor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [MtxCkeditorModule]
})
export class AppComponent {
  editorData: string = '<p>Hello, world!</p>';
  editorconfig = {
    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
    heading: {
      options: [
        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
      ]
    }
  };
}
```

### Adding the Component to Templates

```html
<mtx-ckeditor [(ngModel)]="editorData" [editorconfig]="editorconfig"></mtx-ckeditor>
```

## Basic Module-Based Usage

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MtxCkeditorModule } from '@your-library/ckeditor';

@NgModule({
	declarations: [AppComponent],
	imports: [
		BrowserModule,
		FormsModule,
		ReactiveFormsModule,
		MtxCkeditorModule
	],
	bootstrap: [AppComponent]
})
export class AppModule {}
```
In the AppComponent template file (app.component.html), use the component as:

```html
<mtx-ckeditor [(ngModel)]="editorData" [editorconfig]="editorconfig"></mtx-ckeditor>
```

## Features

The `MtxCkeditor` component supports a wide range of features provided by CKEditor 5:

- **Rich Text Editing**: Offers all standard formatting options such as bold, italic, underline, headings, lists, blockquotes, and more.
- **Customizable Toolbar**: Highly customizable toolbar configuration.
- **Heading Options**: Define different heading options for the editor.
- **Integration with Angular Forms**: Seamlessly integrates with Angular forms using `ngModel`.

## Customization

The `MtxCkeditor` component can be customized via its configuration object, enabling or disabling features, setting up the toolbar, configuring plugins, and more.

### Example Configuration

```typescript
editorconfig: any = {
  toolbar: ['heading', '|', 'bold', 'italic', 'link'],
  heading: {
    options: [
      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
      { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
      { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
    ]
  }
};
```

## Accessibility

The `MtxCkeditor` component is built with accessibility in mind, supporting ARIA attributes to ensure usability by people with disabilities.

## API
**MtxCkeditor Component**

| Selector         | Description                |
|------------------|----------------------------|
| `mtx-ckeditor`   | CKEditor 5 wrapper component |

### Properties

| Name               | Type   | Description                                                     |
|--------------------|--------|-----------------------------------------------------------------|
| `@Input() editorconfig` | `any`  | Configuration object for the CKEditor instance.                   |
| `@Input() value`   | `string` | Represents the content of the editor. Can be used to get or set the editor's content. |

### Methods

| Name                             | Description                                                         |
|----------------------------------|---------------------------------------------------------------------|
| `writeValue(value: string): void`  | Sets the content of the editor.                                      |
| `registerOnChange(fn: any): void`  | Registers a callback function to be called when the editor's content changes. |
| `registerOnTouched(fn: any): void` | Registers a callback function to be called when the editor is touched.       |
| `setDisabledState(isDisabled: boolean): void` | Sets the disabled state of the editor.                               |

### Example Usage

```typescript
this.writeValue('<p>New content</p>');
this.registerOnChange((value: string) => {
  console.log('Editor content changed:', value);
});
this.registerOnTouched(() => {
  console.log('Editor touched');
});
this.setDisabledState(true);
```

## Events

| Name           | Description                                                   |
|----------------|---------------------------------------------------------------|
| `editorChange` | Emits an event whenever the editor's content changes. The event payload is the current content of the editor. |

### Example Usage

```html
<mtx-ckeditor (editorChange)="onEditorChange($event)"></mtx-ckeditor>
```

```typescript
onEditorChange(content: string): void {
  console.log('Editor content changed:', content);
}
```

## Usage in Forms

The `MtxCkeditor` component supports integration with Angular forms. It can be used with both template-driven and reactive forms.

### Template-Driven Forms

```html
<form>
  <mtx-ckeditor [(ngModel)]="editorData" [editorconfig]="editorconfig" name="editor"></mtx-ckeditor>
</form>
```

### Reactive Forms

```typescript
import { FormGroup, FormControl } from '@angular/forms';

form = new FormGroup({
  editor: new FormControl('<p>Initial content</p>')
});
```

```html
<form [formGroup]="form">
  <mtx-ckeditor formControlName="editor" [editorconfig]="editorconfig"></mtx-ckeditor>
</form>
```

## Summary

The `MtxCkeditor` component is a powerful tool for integrating CKEditor 5 into Angular applications. By leveraging its extensive configuration options and seamless form integration, developers can provide a rich text editing experience within their applications.

For further information on CKEditor 5 and its capabilities, please refer to the [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).