Configure the MathType toolbar

Configure the MathType toolbar to control which tabs, sections, and buttons are available to users. You can customize the toolbar by passing a toolbar XML definition to the MathType editor parameters. Use this configuration when you need a simplified toolbar, want to remove unused tools, or need to add custom buttons for specific mathematical templates.

After completing this guide, MathType will display the toolbar layout required by your integration.

Before you begin

Requirements

Make sure you have:

• A working MathType Integration Services deployment.
• Access to the frontend configuration.
• The toolbar tabs, sections, or items you want to show, hide, move, or add.

Applies to

All MathType frontend integrations.

Steps

Choose how to customize the toolbar

You can customize the toolbar in two main ways:

• Start from an existing toolbar and modify it.
• Define a smaller toolbar with only the items you need.

In most cases, start from an existing toolbar. This keeps your toolbar closer to the default MathType experience and makes it easier to benefit from future toolbar updates. Use a fully custom toolbar only when you need a very specific set of buttons.

Understand the toolbar structure

The MathType toolbar is organized into tabs, sections, and items. You can customize each of these elements independently when defining the toolbar XML.

For a complete description of the toolbar vocabulary and XML syntax, see Toolbar XML reference.

Define the toolbar XML

The toolbar is configured using an XML definition. Most customizations start from an existing toolbar and modify only the required tabs or items. For example, the following toolbar definition uses the WirisQuizzes toolbar:

<toolbar ref="quizzes"/>

To customize the general toolbar, start from the general toolbar and add, remove, or reposition tabs and items. For example:

<toolbar ref="general" removeLinks="true">
  <removeTab ref="arrows"/>
  <tab ref="general" empty="true">
    <item ref="fraction"/>
    <item ref="squareRoot"/>
  </tab>
</toolbar>

This example:

• Starts from the general toolbar.
• Removes the Arrows tab.
• Keeps only the Fraction and Square Root items in the General tab.
• Removes external links from the toolbar.

Pass the toolbar definition to MathType

Pass the toolbar XML string as the value of the MathType toolbar parameter. For example:

mathTypeParameters: {
  editorParameters: {
    toolbar: '<toolbar ref="quizzes"/>'
  }
}

If your XML contains line breaks, convert it to a single-line string before using it as a JavaScript parameter. For example:

mathTypeParameters: {
  editorParameters: {
    toolbar: '<toolbar ref="general" removeLinks="true"><removeTab ref="arrows"/><tab ref="general" empty="true"><item ref="fraction"/><item ref="squareRoot"/></tab></toolbar>'
  }
}

Add custom buttons

You can add custom buttons to insert specific MathML templates. A custom button requires:

• An icon.
• A tooltip title.
• Valid MathML content.
• An optional cursor offset.

For example:

<createButton icon="https://example.com/squareroot_fraction.png" title="Square root of a fraction" offset="2">
  <content>
    <msqrt>
      <mfrac>
        <mrow/>
        <mrow/>
      </mfrac>
    </msqrt>
  </content>
</createButton>

The content inside <content> must be valid MathML.

Apply the configuration

Save the frontend configuration and reload the page where your editor is loaded. If your application bundles frontend assets, rebuild or redeploy the application if required.

Verify the configuration

Open the MathType editor and verify that the toolbar matches your XML definition. Check that:

• The expected tabs are visible.
• Removed tabs or items no longer appear.
• Added items appear in the expected position.
• Custom buttons insert the expected MathML content.

Verify it worked

Perform a complete editing cycle:

• Open your HTML editor.
• Open MathType.
• Use the customized toolbar to insert a formula.
• Save the content.
• Reopen the formula for editing.
• Verify that the toolbar and inserted formula behave as expected.

Common issues

The toolbar does not change

Verify that:

• The toolbar parameter is being passed to MathType.
• The frontend configuration has been saved and reloaded.
• Cached frontend assets have been cleared or rebuilt if required.

Some toolbar items do not appear

Verify that:

• The item identifiers are spelled and capitalized correctly.
• The items are available in the toolbar you are modifying.
• The XML definition is valid.

A custom button does not work

Verify that:

• The MathML inside <content> is valid.
• The icon URL is accessible from the browser.
• The custom button syntax is correct.
• The cursor offset value is valid for the inserted template.

Related articles

• Configure MathType editor parameters.
• Toolbar XML reference.
• MathType Editor parameters.