12

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

Kr1
  • 1,269
  • 2
  • 24
  • 56
  • Did you find the answer? I too have the same problem. – Karthik RP Mar 13 '19 at 10:23
  • Yes, the 'builtinPlugins' configuration must be done directly in the build as explained there: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html – Kr1 Mar 13 '19 at 11:21
  • You have to create a 'custom build', and then import it from you component – Kr1 Mar 13 '19 at 11:22
  • Yup., was woking on the same. Any tips on publishing the custom build as an npm library? – Karthik RP Mar 13 '19 at 11:55
  • Nope, I stored it in assets folder and I'm loading it from there. – Kr1 Mar 13 '19 at 12:04
  • Oh k., Cool. I got it working by pushing it to a npm repo. I guess you should answer your question and accept it if everything is working fine. – Karthik RP Mar 14 '19 at 05:22
  • How did you pushed it to a npm repo? – Kr1 Mar 14 '19 at 17:38
  • 1
    Create an account in npmjs.com, login from your terminal using command 'npm login'. Change the 'name' and 'version' attributes in package.json in your custom build. Note that name has to be unique(ie the package should not exist npm library). Build the ckeditor using 'npm run build'. If the build is successful, then run 'npm publish'. You can installl the package using 'npm i --save' in your project. – Karthik RP Mar 15 '19 at 05:28
  • see this link: https://stackoverflow.com/questions/39208766/ng2-ckeditor-add-placeholder-plugin-using-typescript-and-angular-2-0/64329399#64329399 – Abolfazl Roshanzamir Oct 14 '20 at 12:39
  • I am getting duplicate module error – Dhairya Tripathi Feb 19 '21 at 15:54

2 Answers2

2

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.

Kr1
  • 1,269
  • 2
  • 24
  • 56
2

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

Maksim Vorontsov
  • 799
  • 8
  • 18