Integrate MathType with CKEditor

Use this guide to add MathType to CKEditor when you want to use MathType’s hosted services instead of installing services on your own server.

Before you begin

Requirements

• CKEditor 4 or CKEditor 5 installed.
• A valid MathType license.
• A working CKEditor instance already initialized in your application.

Applies to

MathType for HTML editors · CKEditor integrations

Steps

For CKEditor 4

Install the MathType package

Add the MathType plugin to your project.

npm install @wiris/mathtype-ckeditor4

Add the MathType plugin as an external plugin

Register the MathType plugin before initializing CKEditor.

CKEDITOR.plugins.addExternal(
    'ckeditor_wiris',
    '/node_modules/@wiris/mathtype-ckeditor4/',
    'plugin.js'
);

Enable the MathType plugin in CKEditor

Add the plugin to the CKEditor configuration.

CKEDITOR.replace('editor', { 
    extraPlugins: 'ckeditor_wiris'
});

Enable MathType buttons in the toolbar

Add the MathType and ChemType buttons to the toolbar.

toolbar: [ 
    { 
        name: 'wirisplugins', 
        items: [ 
            'ckeditor_wiris_formulaEditor', 
            'ckeditor_wiris_formulaEditorChemistry' 
        ] 
    } 
]

Preserve MathML content

Allow CKEditor to preserve the MathML content used by formulas.

allowedContent: true

Without this setting, CKEditor may filter or remove MathML content when formulas are inserted, edited, or reloaded from stored content.

Full configuration example

CKEDITOR.plugins.addExternal(
    'ckeditor_wiris',
    '/node_modules/@wiris/mathtype-ckeditor4/',
    'plugin.js'
);
CKEDITOR.replace('editor', {
    extraPlugins: 'ckeditor_wiris',


    // Required to preserve MathML.
    allowedContent: true,

    toolbar: [
        {
            name: 'wirisplugins',
            items: [
                'ckeditor_wiris_formulaEditor',
                'ckeditor_wiris_formulaEditorChemistry'
            ]
        },
        {
            name: 'others'
        }
    ]
});

Start or reload your application 

Apply the changes and initialize the editor.

For CKEditor 5

Install the MathType package

Add the MathType plugin to your project.

npm install @wiris/mathtype-ckeditor5

Import the MathType plugin

Import the MathType plugin and its styles in your application entry point.

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

Register the MathType plugin

Add the MathType plugin to the CKEditor configuration.

ClassicEditor.create(editorElement, {
  plugins: [
    Essentials,
    Paragraph,
    Bold,
    Italic,
    MathType
  ]
});

Enable MathType buttons in the toolbar

Add the MathType and ChemType buttons to the toolbar.

toolbar: [
  'MathType',
  'ChemType'
]

Full configuration example

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

import 'ckeditor5/ckeditor5.css';

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

ClassicEditor
  .create(document.querySelector('#editor'), {

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

    toolbar: [
      'bold',
      'italic',
      'MathType',
      'ChemType'
    ]
  })
  .catch(error => {
    console.error(error);
  });

Start or reload your application

Apply the changes and initialize the editor.

Verify it worked

• The CKEditor editor loads correctly.
• MathType and ChemType buttons appear in the CKEditor toolbar.
• You can insert and edit a formula in the editor.
• Formulas render correctly inside the editor.

Options and variations

CDN-based integration

If you're using CKEditor 4 and want to load MathType without installing the integration package locally, you can use the CDN-hosted version of the plugin. This approach is useful when CKEditor itself is loaded from a CDN or when you want to minimize deployment complexity. See Use MathType with CKEditor 4 via CDN.

Framework-based integration (React, Angular, etc.)

If you're using a framework, the integration steps differ depending on your setup. See Use MathType with CKEditor 5 in React and Use MathType with CKEditor 5 in Angular.

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.

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.

Common errors

The MathType button does not appear

The plugin may not be included in the CKEditor configuration. Check that:

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

Formulas are removed after saving

CKEditor may be filtering MathML content. For CKEditor 4, make sure allowedContent: true is enabled. CKEditor 5 preserves MathML content by default when using the MathType plugin.

Related

• MathType for CKEditor: Overview.
• Use MathType with CKEditor 4 via CDN.
• Use MathType with CKEditor 5 in React.
• Use MathType with CKEditor 5 in Angular.
• MathType integration architecture.
• MathType integrations deployment models.