MathType Generic Integration

Type and handwrite mathematical notation with MathType.

Easily include quality math equations in your documents and digital content.

Table of contents

- Table of contents
- Getting started
- Known issues
- Parsing data
- Setting data
- Getting data
- Services
- Install instructions
- Java
- PHP
- Displaying on Target Page
- Documentation
- Privacy policy

Getting started

The following example shows how to integrate MathType into an editable HTML element. The integration consists of two steps: loading a JavaScript file and initializing the plugin into the editable HTML element.

To integrate MathType, please follow the steps below. Please, note you may adjust the example parameters of the example below depending on your integration.

1. Create a new HTML file with two HTML elements, one for the editable area and another for the toolbar:

``html




`
npm install @wiris/mathtype-generic
`

3. Load the module into your project by adding the following code at the head of the document:

`html



`

4. [OPTIONAL] Create a variable to Store MathType Configurable Properties, as for example:

`js
let mathTypeParameters: {
editorParameters: { language: 'es' },
},
`

For more information on the configurable properties, check the official documentation page.

5. Add one of the following code just before closing the body tag:

`html

`

or

`html

`

This is the main step of the integration. It does the following:

- Appends two buttons to the toolbar div, one for the math editor and another for the chemistry editor.
- Initializes the integration into the editable HTML element, assigning listeners to some events of the HTML element. This allows, for instance, to open a formula just by double-clicking it. You may change target and toolbar parameters depending on the structure of your HTML editor.
- The target property must contain the editable HTML element. This is a mandatory parameter.
- The toolbar property must contain the HTML element representing the toolbar. This parameter is optional.

After following these steps, you should have something like this:

`html










`

Notice the example assumes this directory structure:

`
└───index.html
└───node_modules
└───@wiris/mathtype-generic
`

Known issues

- The editor's caret is lost when inserting a new formula on Safari with ChemType #486

Parsing data

By default, MathType stores equations and the formulas as MathML. However while editing, MathType converts all MathML into img tags rendered inside the editable HTML element.

$3

Before setting the content of the editable HTML element, you must first convert all MathML into images by using the Parser class:

`js
htmlData = WirisPlugin.Parser.initParse(htmlData);
`

For instance, the following call:

`js
WirisPlugin.Parser.initParse("hello! $x$ goodbye");
`

Returns the following:

`html
hello!
style="max-width: none; vertical-align: -4px;"
class="Wirisformula"
src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Awrs%3D%22http%3A%2F%2Fwww.wiris.com%2Fxml%2Fcvs-extension%22%20height%3D%2219%22%20width%3D%2213%22%20wrs%3Abaseline%3D%2215%22%3E%3C!--MathML%3A%20%3Cmath%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1998%2FMath%2FMathML%22%3E%3Cmo%3Ex%3C%2Fmo%3E%3C%2Fmath%3E--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%2F%3E%3C%2Fdefs%3E%3Ctext%20font-family%3D%22Arial%22%20font-size%3D%2216%22%20text-anchor%3D%22middle%22%20x%3D%226.5%22%20y%3D%2215%22%3Ex%3C%2Ftext%3E%3C%2Fsvg%3E"
data-mathml="«math»«mo»x«/mo»«/math»"
alt="x"
role="math"
width="13"
height="19"
align="middle"
/>
goodbye
`

You can test this by adding the following JavaScript code at the end of script in our previous example:

`js
var htmlEditor = document.getElementById("htmlEditor");
var data = "Initial data: $\sqrt{x}$";
htmlEditor.innerHTML = WirisPlugin.Parser.initParse(data);
`

$3

After retrieving the content of the editable HTML element, you must convert all images into MathML:

`js
htmlData = WirisPlugin.Parser.endParse(htmlData);
`

For instance, the following call:

`js
WirisPlugin.Parser.endParse(
'hello! goodbye',
);
`

Returns the following:

`html
hello! $x$ goodbye
`

Services

This npm module uses remotely hosted services to render MathML data. However, we recommend you install these services on your backend. This will allow you, among other things, to configure the service and to locally store the images generated by MathType.

The services are available for Java and PHP. If you use any of these technologies, please download the plugin for your backend technology from here.

$3

#### Java

To install the Java services, please, follow the steps below:

1. Download and extract MathType for generic HTML editor - Java.

2. Deploy pluginwiris_engine.war in your Java application server (e.g., Tomcat or JBoss).

3. Set the following value for the configurationService property:

`js
genericIntegrationProperties.configurationService = "/pluginwiris_engine/app/configurationjs";
`

The previous example would end up like this:

`js

`

#### PHP

To install the PHP services, please, follow the steps below:

1. Download and extract MathType for generic HTML editor - PHP.

2. Copy the generic_wiris/integration directory into your project.

3. Set the following value for the configurationService property:

`js
genericIntegrationProperties.configurationService = "integration/configurationjs.php";
`

The previous example would end up like this:

`js

`

Displaying on Target Page

In order to display mathematical formulas on the target page, i.e. the page where content produced by the HTML editor will be visible, the target page needs to include the MathType script. For example for the default setting this would be:

`html

``

Documentation

To find out more information about MathType, please go to the following documentation:

- MathType documentation
- Introductory tutorials
- Service customization
- Testing

Privacy policy

The MathType Privacy Policy covers the data processing operations for the MathType users. It is an addendum of the company’s general Privacy Policy and the general Privacy Policy still applies to MathType users.