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
  • Table of Contents
  • Installation
  • Basic Standalone Usage
    • Importing the Module
    • Adding the Component to Templates
  • Basic Module-Based Usage
  • Features
  • Customization
    • Example Configuration
  • Accessibility
  • API
    • Properties
    • Methods
    • Example Usage
  • Events
    • Example Usage
  • Usage in Forms
    • Template-Driven Forms
    • Reactive Forms
  • Summary

Installation

To install this library, run:

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

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

<mtx-ckeditor [(ngModel)]="editorData" [editorconfig]="editorconfig"></mtx-ckeditor>

Basic Module-Based Usage

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:

<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

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

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

<mtx-ckeditor (editorChange)="onEditorChange($event)"></mtx-ckeditor>

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

<form>
  <mtx-ckeditor [(ngModel)]="editorData" [editorconfig]="editorconfig" name="editor"></mtx-ckeditor>
</form>

Reactive Forms

import { FormGroup, FormControl } from '@angular/forms';

form = new FormGroup({
  editor: new FormControl('<p>Initial content</p>')
});

<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.