ckeditor5 text-alignment plugin not working

Question

• I followed the installation steps for text alignment plugin as mentioned in the docs of ckeditor5.

• Added the alignment plugin as below

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; ClassicEditor .create(this.element.nativeElement, { plugins: [ Alignment ], toolbar: [ 'alignment' ] })

I am getting the below error:

TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (iconview.js:100)
    at IconView.render (iconview.js:76)
    at IconView.on (observablemixin.js:241)
    at IconView.fire (emittermixin.js:196)
    at IconView.(anonymous function) [as render] (webpack-internal:///./node_modules/@ckeditor/ckeditor5-utils/src/observablemixin.js:249:16)
    at ViewCollection.on (viewcollection.js:68)
    at ViewCollection.fire (emittermixin.js:196)
    at ViewCollection.add (collection.js:182)
    at ButtonView.render (buttonview.js:160)
    at ButtonView.on (observablemixin.js:241)

Can someone help me how to tackle this? Followed the steps as mentioned in the docs but still having this issue.

Here is the complete angular5 component code for ckeditor:

import { Component, OnInit, OnDestroy, NgZone, ElementRef, ChangeDetectionStrategy, forwardRef } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'ck-editor',
  template: '<textarea></textarea>',
  styleUrls: ['./ck-editor.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CkEditorComponent),
    multi: true
  }],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CkEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {

  onChange: Function;
  onTouched: Function;
  model: string;
  editor;

  constructor(private ngZone: NgZone,
    private element: ElementRef) {
  }

  ngOnInit() {
    ClassicEditor
      .create(this.element.nativeElement,  {
      plugins: [Alignment],
      toolbar: [
          'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
      ]
    })
      .then(editor => {
        this.editor = editor;
        editor.model.document.on('change', () => {
          if (editor.model.document.differ.getChanges().length > 0) {
            this.ngZone.run(() => this.onChange(editor.getData()));
          }
        });
        editor.model.document.on('blur', () => {
          this.ngZone.run(() => this.onTouched());
        });
        this.editor.setData(this.model ? this.model : '');
      })
      .catch(error => {
        console.error(error);
      });
  }

  ngOnDestroy() {
    if (this.editor) {
      return this.editor.destroy();
    }
  }

  writeValue(value) {
    this.model = value;
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

}

Answer 1

Choose custom build according to your requirement by clicking on below link

CKEditor 5 Online Builder

1.Choose plugins. add Alignment plugin.

2.Drag and drop which plugins do you want to use in toolbar.

3.Download the bundle.

4.Extract the zip and copy the ckeditor.js file from build folder and paste it in node_modules/@ckeditor/ckeditor5-build-classic/build. Then, It will be replaced with whatever features you have choosen.**

5.Install ckeditor5-alignment package with version(whatever the version of @ckeditor/ckeditor5-build-classic in package.json).

npm i --save-dev @ckeditor/[email protected]

6.editor.component.html

<ckeditor [editor]="Editor" [config]="config"></ckeditor>

7.editor.component.ts

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.scss']
})


export class EditorComponent implements OnInit {
  public Editor = ClassicEditor;
  public config = {
    toolbar: {
      items: [
        'heading',
        '|',
        'bold',
        'italic',
        'link',
        'bulletedList',
        'numberedList',
        'alignment',
        'imageUpload',
        'blockQuote',
        'undo',
        'redo'
      ]
    },
    alignment: {
      options: ['left', 'right', 'center', 'justify']
    },
    removePlugins: ['MediaEmbed', 'Link'], mediaEmbed: {} //if you want to remove any plugin
  };

  ngOnInit() {
  }
}

Output:

Answer 2

Besides what I wrote in my second answer there's another issue in your code. It does not manifested itself yet, but it would if the editor had started.

The problem is here:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

You cannot add plugins to an existing build like this. This will lead to an awful code duplication and runtime errors. The reason is that the build has already many plugins bundled in itself, so the whole core packages are included there too. The alignment feature depends on the core packages too so if you'll build it like this, the core packages will be included twice.

There's a separate guide how to install plugins and I highly recommend reading it.