Integrate MathType with a custom HTML editor

Use this guide when you want to add MathType to a custom HTML editor or editable content area that does not have a dedicated MathType integration.

Before you begin

Requirements

• A web application with an editable HTML area.
• Node.js and npm.
• Basic knowledge of HTML and JavaScript.
• A valid MathType license for production use.

Applies to

MathType for HTML editors · MathType Generic Integration

Steps

Create an editable area

Create an editable HTML element and a container for the MathType toolbar.

<div id="toolbar"></div>
<div id="htmlEditor" contenteditable="true">Try me!</div>

Initialize the npm project

If your project is not already an npm project, initialize it first.

npm init -y

Install the MathType Generic Integration package

Install the package using npm.

npm install @wiris/mathtype-generic

Load the integration script

Load the MathType Generic Integration script in your application.

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

Initialize the integration

Create a GenericIntegration instance and connect it to the editable element.

<script>
var genericIntegrationProperties = {};

genericIntegrationProperties.target =
  document.getElementById("htmlEditor");

genericIntegrationProperties.toolbar =
  document.getElementById("toolbar");

var genericIntegrationInstance =
  new WirisPlugin.GenericIntegration(
    genericIntegrationProperties
  );

genericIntegrationInstance.init();

genericIntegrationInstance.listeners.fire(
  "onTargetReady",
  {}
);

WirisPlugin.currentInstance =
  genericIntegrationInstance;
</script>

Start or reload your application

Apply the changes and load the page containing your editor.

Verify it worked

Check that:

• MathType and ChemType buttons appear in the toolbar.
• Clicking either button opens the corresponding editor.
• You can insert a formula into the editable area.
• Existing formulas can be edited again.

Options and variations

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.

Customize MathType parameters

If you need advanced configuration, you can customize the editor's behaviour (such as the toolbar, language, or editor settings) by defining integration parameters before initializing the integration.

let mathTypeParameters = {
  editorParameters: {
    language: 'es'
  }
};

Then assign them to the integration configuration.

genericIntegrationProperties.integrationParameters =
  mathTypeParameters;

See MathType configuration options.

Common errors

MathType buttons do not appear

Check that:

• The integration script is loaded correctly.
• The toolbar element exists.
• The integration initialization code runs after the page has loaded.

Clicking the button does nothing

Verify that the target editable element exists and is correctly assigned to the integration.

Formulas are not rendered correctly

Verify your service configuration and ensure the required MathType services are available.

Related

• Understand MathType deployments.
• MathType integrations architecture.
• MathType integrations deployment models.