Integrate MathType with TinyMCE

Use this guide to add MathType to a TinyMCE editor so users can create and edit mathematical formulas directly in the editor.

Before you begin

Requirements

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

Applies to

MathType for HTML editors · TinyMCE integrations

Steps

Install the MathType package

Add the MathType plugin to your project.

npm install @wiris/mathtype-tinymce7

Load the MathType plugin in TinyMCE 

Configure TinyMCE to use the plugin.

tinymce.init({
  external_plugins: {
    tiny_mce_wiris: '/node_modules/@wiris/mathtype-tinymce7/plugin.min.js'
  }
});

Enable MathType buttons in the toolbar 

Add the formula editor buttons.

toolbar: 'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry'

Preserve MathML content

Ensure TinyMCE preserves MathML elements and attributes used by formulas.

extended_valid_elements: '*[.*]'

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

Start or reload your application 

Apply the changes and initialize the editor.

Verify it worked

Check that:

• The TinyMCE editor loads correctly.
• MathType and ChemType buttons appear in the TinyMCE 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 TinyMCE 5 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 TinyMCE itself is loaded from a CDN or when you want to minimize deployment complexity. See Use MathType with TinyMCE 5 using 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 TinyMCE in React and Use MathType with TinyMCE 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

Check plugin path and TinyMCE configuration. It may not be loaded correctly.

Failed to load plugin (404 error)

Verify that the file exists at the specified location. You may have included an incorrect plugin path.

Formulas are not rendered correctly

Ensure extended_valid_elements is configured. The MathML may not be enabled.

Editor loads, but MathType does not open

Verify service configuration or use cloud services. It is possible that some services are missing or misconfigured.

Related

• Use MathType with TinyMCE 5 using CDN.
• Use MathType with TinyMCE in React.
• Use MathType with TinyMCE in Angular.
• MathType integration architecture.
• MathType integrations deployment models.