How to install CKEDITOR to angular project and add plugins

emmaakachukwu picture emmaakachukwu · Dec 6, 2019 · Viewed 8.3k times · Source

I am trying to install ckeditor to my angular project. I already tried installing ckeditor4-angular via npm but was unable to find a way to add plugins like the WIRIS mathType. Please how can i install the editor to my angular project and as well install plugins?

Answer

Maksim Vorontsov picture Maksim Vorontsov · Dec 7, 2019

Here is an issue regarding this https://github.com/ckeditor/ckeditor5-angular/issues/134. You need to create your custom CKEditor build and include necessary plugins into it. Here is the guide: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html BTW I suggest you to use CKEditor 5, the latest version.

UPD:

  1. Clone the original repo:

git clone https://github.com/ckeditor/ckeditor5-build-classic.git

  1. Install dependencies

npm install

  1. Install necessary plugin itself

npm install --save @wiris/mathtype-ckeditor5

  1. Open src/ckeditor.js and new plugin to the editor:
...
import MathType from '@wiris/mathtype-ckeditor5';
...

ClassicEditor.builtinPlugins = [
   ...
   MathType
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            ...
            'MathType',
            ...
        ]
    },
    ...
};
  1. Then build the editor (you maybe need to install yarn)

yarn run build

  1. After that copy everything from build folder to your project. For instance
src/assets/js/ck-editor-math-type/
   -> translations
      -> ...
   -> ckeditor.js
  1. Add ckeditor code to package.json
"dependencies": {
   ...
   "@ckeditor/ckeditor5-angular": "^1.1.2",
   ...
}
  1. Import CKEditor to your component:
import * as ClassicEditor from '../../assets/js/ck-editor-math-type/ckeditor.js';

...
export class CkeditComponent implements OnInit {

    public Editor = ClassicEditor;

    public model = {
        editorData: '<p>Hello, world!</p>'
    };
}
  1. Add it too your template.html
<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

Hope this help you.