Как установить CKEDITOR в проект angular и добавить плагины

Вот проблема, связанная с этим https://github.com/ckeditor/ckeditor5-angular/issues/134. Вам необходимо создать собственную сборку CKEditor и включить в нее необходимые плагины. Вот руководство: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html Кстати, я предлагаю вам использовать последнюю версию CKEditor 5.

UPD:

1. Клонировать исходное репо:

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

2. Установить зависимости

npm install

3. Самостоятельно установить необходимый плагин

npm install --save @wiris/mathtype-ckeditor5

4. Откройте src/ckeditor.js и новый плагин к редактору:

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

ClassicEditor.builtinPlugins = [
   ...
   MathType
];

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

5. Затем соберите редактор (возможно, вам потребуется установить пряжу)

yarn run build

6. После этого скопируйте все из папки build в свой проект. Например

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

7. Добавить код ckeditor в package.json

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

8. Импортируйте CKEditor в свой компонент:

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

9. Добавьте его тоже в свой template.html

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

Надеюсь, это вам поможет.

После шага 7

Добавьте код ckeditor в зависимости package.json: {... @ ckeditor / ckeditor5-angular: ^ 1.1.2, ...}

Шаг 8:

npm install

шаг 9:

В файле app.module.ts вы можете добавить

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 { }

Шаг 10: В файл tsconfig.json добавьте allowJs: ture

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

шаг 11:

Импортируйте CKEditor в свой компонент:

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

шаг 12:

Добавьте его тоже в свой template.html

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