Use MathType with CKEditor 5 in Angular

Use this guide when you are integrating CKEditor 5 in an Angular application and want to enable MathType for formula editing.

Before you begin

Requirements

• An Angular application
• Angular CLI
• Node.js and npm
• A valid MathType license

Applies to

MathType for HTML editors · CKEditor 5 · Angular

Steps

Create or open your Angular project

If you already have an Angular application, use that project. Otherwise, create a new Angular project and move into its directory.

ng new $APP_NAME

When prompted, select:

• Stylesheet format: CSS
• Server-Side Rendering (SSR): No
• AI tools configuration: None

Then move into the project directory and install the project dependencies.

cd $APP_NAME

Install CKEditor 5, the Angular integration, and MathType

Install the required packages.

npm install ckeditor5 
npm install @ckeditor/ckeditor5-angular
npm install @wiris/mathtype-ckeditor5

Create a TypeScript declaration file

Create a file named src/types.d.ts with the following content:

declare module '@wiris/mathtype-ckeditor5/dist/index.js';

This declaration allows Angular to resolve the MathType module correctly.

Import CKEditor 5 and MathType

Open src/app/app.ts and import CKEditor 5, the Angular integration, and MathType.

import { Component } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

import {
  ClassicEditor,
  Essentials,
  Paragraph,
  Bold,
  Italic
} from 'ckeditor5';

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

Configure CKEditor 5

Create a configuration object and add the MathType plugin and toolbar buttons.

public Editor = ClassicEditor;

public config = {

  plugins: [
    Essentials,
    Paragraph,
    Bold,
    Italic,
    MathType
  ],

  toolbar: [
    'bold',
    'italic',
    'MathType',
    'ChemType'
  ]
};

Render the editor

Open src/app/app.html and replace the default Angular template with:

<main style="padding: 2rem">

  <ckeditor
    [editor]="Editor"
    [config]="config"
    data="<p>Hello CKEditor 5!</p>">
  </ckeditor>
</main>

Import the editor styles

Open src/styles.css and add:

@import 'ckeditor5/ckeditor5.css';
@import '@wiris/mathtype-ckeditor5/dist/index.css';

Start the development server

Run the development server.

npm serve

Full example

import { Component } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

import {
  ClassicEditor,
  Essentials,
  Paragraph,
  Bold,
  Italic
} from 'ckeditor5';

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

@Component({
  selector: 'app-root',
  imports: [CKEditorModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  public Editor = ClassicEditor;

  public config = {
    licenseKey: 'GPL',

    plugins: [
      Essentials,
      Paragraph,
      Bold,
      Italic,
      MathType
    ],

    toolbar: [
      'bold',
      'italic',
      'MathType',
      'ChemType'
    ],

  };
}

Verify it worked

• The CKEditor 5 editor loads in your Angular application.
• MathType and ChemType buttons appear in the CKEditor toolbar.
• You can insert and edit a formula in the editor.

Options and variations

Advanced configuration

If you need advanced configuration, you can customize the editor's behaviour (such as the toolbar, language, or editor settings). See MathType configuration options.

Backend services

If you need backend services (Java or PHP), some deployments require additional services for formula rendering and storage. See MathType integrations deployment models.

Common errors

MathType buttons do not appear

Check that:

• The MathType plugin was added to the plugins configuration.
• The MathType and/or ChemType toolbar items were added to the toolbar configuration.

Could not find a declaration file for module '@wiris/mathtype-ckeditor5/dist/index.js'

Create the src/types.d.ts file described in this guide.

Related

• MathType integration architecture.
• MathType integrations deployment models.