@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.
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago