Ckeditor component

Intro

Ckeditor component is a custom formly field type created for CKEditor 5.

How to use

In your Angular project install one of the CKEditor 5 predefined builds or create a custom one.

This tutorial assumes that you picked @ckeditor/ckeditor5-build-classic:

npm install --save @ckeditor/ckeditor5-build-classic

Add FormlyCkeditorModule to modules whose components will be using the ckeditor component in their templates and provide ENTRY_CKEDITOR_OPTIONS.

import { ENTRY_CKEDITOR_OPTIONS, FormlyCkeditorModule } from '@enigmatry/entry-form';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@NgModule({
  declarations: [
    DemoComponent
  ],
  imports: [
    CommonModule,
    FormlyCkeditorModule
  ],
  providers: [
    {
      provide: ENTRY_CKEDITOR_OPTIONS,
      useValue: {
        build: ClassicEditor,
        config: {
          toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link']
        }
      }
    }]
})
export class DemoModule { }

API reference

Module

import {FormlyCkeditorModule} from '@enigmatry/entry-form';

Types

const ENTRY_CKEDITOR_OPTIONS = new InjectionToken<EntryCkeditorOptions>('EntryCkeditorOptions');

interface EntryCkeditorOptions {
  build: CKEditor5.EditorConstructor;
  config?: CKEditor5.Config;
}

EntryCkeditorOptions

Name	Description
build: CKEditor5.EditorConstructor	CKEditor 5 predefined builds or create a custom one
config?: CKEditor5.Config	CKeditor 5 configuration