How to install CKEDITOR to angular project and add plugins

Question

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?

use CKEditor in angular: stackoverflow.com/questions/58155972/… — Abolfazl Roshanzamir
– Abolfazl Roshanzamir, Commented Oct 14, 2020 at 12:42
add a plugin to CKEditor in angular: stackoverflow.com/questions/39208766/… — Abolfazl Roshanzamir
– Abolfazl Roshanzamir, Commented Oct 14, 2020 at 12:43

Maksim Vorontsov · Accepted Answer · 2019-12-09 16:53:35Z

19

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:

Clone the original repo:

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

Install dependencies

npm install

Install necessary plugin itself

npm install --save @wiris/mathtype-ckeditor5

Open src/ckeditor.js and new plugin to the editor:

...
import MathType from '@wiris/mathtype-ckeditor5';
...

ClassicEditor.builtinPlugins = [
   ...
   MathType
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            ...
            'MathType',
            ...
        ]
    },
    ...
};

Then build the editor (you maybe need to install yarn)

yarn run build

After that copy everything from build folder to your project. For instance

src/assets/js/ck-editor-math-type/
   -> translations
      -> ...
   -> ckeditor.js

Add ckeditor code to package.json

"dependencies": {
   ...
   "@ckeditor/ckeditor5-angular": "^1.1.2",
   ...
}

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>'
    };
}

Add it too your template.html

<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

Hope this help you.

edited Dec 9, 2019 at 16:53

answered Dec 7, 2019 at 10:19

Maksim Vorontsov

9579 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

emmaakachukwu Over a year ago

Okay. I will love to see the steps as you progress.

Yoku Over a year ago

I am getting duplicate module error, exactly followed the procedure.

Nico Over a year ago

In case anybody wants to use it as an npm package, push it up to your github repository ( gitusername/gitbranch ) (on github.com) and use it in package.json as ... "gitbranch": "gitusername/gitbranch#commit-id", ... . Commit is to ensure you always have the same version. Hope this helps.

paruvelly Vishwanath Over a year ago

after 7th step do i need to import Ckeditor module in my feature module

Ratul Sharker Over a year ago

Here is the elaborated step #7 ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/…

|

Sarvesh Kumar · Accepted Answer · 2020-08-28 04:38:33Z

3

After step 7

Add ckeditor code to package.json "dependencies": { ... "@ckeditor/ckeditor5-angular": "^1.1.2", ... }

Step 8:

npm install

step 9:

In app.module.ts file you can add

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { FormsModule } from '@angular/forms'; 
import { ReactiveFormsModule } from '@angular/forms'; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

step 10: In file tsconfig.json add allowJs: ture

"compilerOptions": {
    "allowJs": true,
}

step 11:

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>'
    };
}

step 12:

Add it too your template.html

<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

answered Aug 28, 2020 at 4:38

Sarvesh Kumar

313 bronze badges

3 Comments

fromage9747 Over a year ago

Spent the whole day on this trying various resources all over the internet and could not get it to work.

Sarvesh Kumar Over a year ago

i have done if you want you can access through this url github.com/sarveshhome/ckeditorwithMathPhysics

Alberto Rivera Over a year ago

For anyone still having issues, ensure your target in your tsconfig.json is es2015 or higher "target": "es2015"

Awesh Vishwakarma · Accepted Answer · 2021-10-07 11:03:37Z

Following steps worked for me :

Copy the everything from "ckeditor5\build" folder to your assets folder.
Import the module in your app.module.ts file like -

//app.module.ts file
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
...
imports:[..., CKEditorModule,]
...

Now, in your component import the custom ckeditor like this -

import * as CustomEditor from '../../../assets/ckeditor.js';

Create the object of editor like this

public Editor = CustomEditor.Editor;

Yes, you have to use Editor property from CustomEditor object

Setup the ckeditor toolbar by settings its config property like :

<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold'. . . . ] }" [editor]="Editor">

Please make sure to set config property as it is going to complain if you don't.

Collectives™ on Stack Overflow

How to install CKEDITOR to angular project and add plugins

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related