mtx-ckeditor

mtx-ckeditor is an Angular wrapper component for CKEditor5, encapsulating the CKEditor functionality in a way that users do not need to be aware of the underlying implementation.

mtx-ckeditor

Installation

To install the mtx-ckeditor library, use npm:

npm install mtx-ckeditor --save

Usage

To use the mtx-ckeditor component in your Angular application, follow these steps:

Import the Module

Import MtxCkeditorModule in your Angular module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MtxCkeditorModule } from 'mtx-ckeditor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MtxCkeditorModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Basic Example

Use the mtx-ckeditor component in your template:

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

In your component, define the editorContent property:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  editorContent: string = '<p>Hello, CKEditor!</p>';
}

Configuration Options

You can pass configuration options to the mtx-ckeditor component via the config input:

<mtx-ckeditor [(ngModel)]="editorContent" [config]="editorConfig"></mtx-ckeditor>

Define the configuration in your component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  editorContent: string = '<p>Hello, CKEditor!</p>';
  
  editorConfig = {
    toolbar: ['bold', 'italic', 'link']
  };
}

API

Inputs

config: Object - Configuration object for CKEditor.
ngModel: string - The content of the editor.

Outputs

ngModelChange: EventEmitter<string> - Emits the updated content of the editor.

JSPM

@ng-zi/extensions-ckeditor

Package Exports

Readme