JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q42022F
  • License MIT

Wrapper Component for Ckeditor

Package Exports

  • @ng-zi/extensions-ckeditor
  • @ng-zi/extensions-ckeditor/package.json

Readme

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

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.