CODEWITHSUNDEEP
angularckeditor
Kr1
Kr1

Reputation: 1303

How to add plugins to CKEditor for Angular "@ckeditor/ckeditor5-angular"?

I installed CKEditor for Angular following this guide: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

I imported CKEditorModule to my Module and added it to my imports.

import { CKEditorModule } from "@ckeditor/ckeditor5-angular";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

In my component, I added the ClassicEditor build and assigned it to a public property.

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

export class AppComponent {
  title = 'AngularCkeditor';
  public Editor = ClassicEditor;
}

Finally I'm using the ckeditor tag in my html template:

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

It works pretty well!

Now I want to add some plugins to it but there is no explanation how to achieve that.

So I followed the default guide for installing plugins: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

For example I tried to install the Alignment plugin:

npm install --save @ckeditor/ckeditor5-alignment

Then I imported the plugin to my component and tried to load it.

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; 

ClassicEditor.builtinPlugins = [
  Alignment
];

When I do this I keep stucked with an error:

TypeError: Cannot read property 'getAttribute' of null

enter image description here

It's so strange because I followed the same guide to edit the configuration of CKEditor, and it works perfectly.

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'heading',
      '|',
      'alignment',
      'bold',
      'italic',
      '|',
      'bulletedList',
      'numberedList',
      '|',
      'link',
      'blockQuote',
      '|',
      'imageUpload',
      '|',
      'undo',
      'redo'
    ]
  },
  image: {
    toolbar: [
      'imageStyle:full',
      'imageStyle:side',
      '|',
      'imageTextAlternative'
    ]
  },
  language: 'en'
};

enter image description here

Upvotes: 12

Views: 18527

Answers (2)

Maksim Vorontsov
Maksim Vorontsov

Reputation: 937

Take a look at the example of adding MathType plugin, you can do the same way for your case https://stackoverflow.com/a/59225002/6465520

Upvotes: 2

Kr1
Kr1

Reputation: 1303

Actually, the 'builtinPlugins' configuration must be done directly in the build instead our component, as explained in the guide: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build

Adding plugins to existing builds is done through their customization. Editor builds are maintained in their respective GitHub repositories. Therefore, assuming that you want to customize the classic editor build you need to:

  • Clone the build repository.
  • Install the plugin package.
  • Add it to the build configuration.
  • Bundle the build.

We must create a 'custom build', and then import it in our component.

Upvotes: 2

Related Questions