@ng-zi/extensions-ckeditor v0.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 - 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.
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago