Integrate MathType with Froala

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

Before you begin

Requirements

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

Applies to

MathType for HTML editors · Froala integrations

Steps

Install the MathType package

Add the MathType plugin to your project.

npm install @wiris/mathtype-froala3

Load the MathType integration script

Load the MathType integration script into your application.

<script src="node_modules/@wiris/mathtype-froala3/wiris.js"></script>

Configure Froala

Initialize Froala and enable the MathType toolbar buttons

new FroalaEditor('.selector', {
  toolbarButtons: ['wirisEditor', 'wirisChemistry'],
  imageEditButtons: ['wirisEditor', 'wirisChemistry']
});

Preserve MathML content

Ensure Froala preserves MathML elements and attributes used by formulas.

new FroalaEditor('.selector', {
  htmlAllowedTags: ['.*'],
  htmlAllowedAttrs: ['.*'],
  htmlAllowedEmptyTags: ['mprescripts', 'none']
});

Without these settings, Froala 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 Froala editor loads correctly.
• MathType and ChemType buttons appear in the Froala toolbar.
• You can insert and edit formulas.
• Formulas render correctly inside the editor.

Options and variations

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

If you're using a framework, the integration steps differ depending on your setup. See Use MathType with Froala in React and Use MathType with Froala 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 that the MathType integration script is correctly loaded and accessible from the browser.

MathML is removed from the editor

Ensure the following settings are included in the Froala configuration

htmlAllowedTags: ['.*'],
htmlAllowedAttrs: ['.*'],
htmlAllowedEmptyTags: ['mprescripts', 'none']

Froala may otherwise filter MathML content.

Editor loads, but MathType does not open

Verify that the MathType plugin script is correctly loaded and that there are no browser console errors related to the integration.

Related

• Use MathType with Froala in React.
• Use MathType with Froala in Angular.
• MathType integration architecture.
• MathType integrations deployment models.