npm

Don't miss out on this year's npm Pride t-shirt designs!Order your favorites here »

@wiris/mathtype-generic

7.14.0 • Public • Published

MathType generic integration Tweet

Type and handwrite mathematical notation with MathType.

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

MathType generic integration screenshot

Table of contents

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 that 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>
      <body>
        <div id="toolbar"></div>
        <div id="htmlEditor" contenteditable="true">Try me!</div>
      </body>
    </html>
  2. Install the npm module:

    npm install @wiris/mathtype-generic
    
  3. Load the module into your project by adding the following code at the head of the document:

    <head>
      <script src="node_modules/@wiris/mathtype-generic/wirisplugin-generic.js"></script> 
    </head>
  4. Add the following code just before closing the body tag:

    <script>
      var genericIntegrationProperties = {};
      genericIntegrationProperties.target = document.getElementById('htmlEditor');
      genericIntegrationProperties.toolbar = document.getElementById('toolbar');
     
      // GenericIntegration instance.
      var genericIntegrationInstance = new WirisPlugin.GenericIntegration(genericIntegrationProperties);
      genericIntegrationInstance.init();
      genericIntegrationInstance.listeners.fire('onTargetReady', {});
    </script> 

    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 on it. You may change target and toolbar parameters depending on the structure of your HTML editor.
    • It is expected that the target property contains the editable HTML element. This parameter is mandatory.
    • It is expected that the toolbar** property contains the HTML element that represents the toolbar. This parameter is optional.

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

<html>
  <head>
    <script src="node_modules/@wiris/mathtype-generic/wirisplugin-generic.js"></script> 
  </head>
  <body>
    <div id="toolbar"></div>
    <div id="htmlEditor" contenteditable="true">Try me!</div>
    
    <script>
      var genericIntegrationProperties = {};
      genericIntegrationProperties.target = document.getElementById('htmlEditor');
      genericIntegrationProperties.toolbar = document.getElementById('toolbar');
 
      // GenericIntegration instance.
      var genericIntegrationInstance = new WirisPlugin.GenericIntegration(genericIntegrationProperties);
      genericIntegrationInstance.init();
      genericIntegrationInstance.listeners.fire('onTargetReady', {});
    </script> 
  </body>
</html>

Notice that the example is assuming that you have the following directory structure:

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

Parsing data

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

Setting data

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

htmlData = WirisPlugin.Parser.initParse(htmlData);

For instance, the following call:

WirisPlugin.Parser.initParse('<span>hello!</span>  <math><mo>x</mo></math> goodbye');

Returns the following:

<span>hello!</span>  <img 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:

var htmlEditor = document.getElementById('htmlEditor');
var data = 'Initial data: <math><msqrt><mo>x</mo></msqrt></math>'
htmlEditor.innerHTML = WirisPlugin.Parser.initParse(data);

Getting data

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

htmlData = WirisPlugin.Parser.endParse(htmlData);

For instance, the following call:

WirisPlugin.Parser.endParse('<span>hello!</span>  <img 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');

Returns the following:

<span>hello!</span>  <math><mo>x</mo></math> goodbye

Services

This npm module uses remotely hosted services to render MathML data. However, it is strongly recommended to install these services in 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, PHP, .NET and Ruby on Rails. If you use any of these technologies, please download the plugin for your backend technology from here.

Install instructions

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:

    genericIntegrationProperties.configurationService = '/pluginwiris_engine/app/configurationjs';

    The previous example would end up like this:

    <script>
      var genericIntegrationProperties = {};
      genericIntegrationProperties.target = document.getElementById('htmlEditor');
      genericIntegrationProperties.toolbar = document.getElementById('toolbar');
     
      // We just added this line:
      genericIntegrationProperties.configurationService = '/pluginwiris_engine/app/configurationjs';
     
      // GenericIntegration instance.
      var genericIntegrationInstance = new WirisPlugin.GenericIntegration(genericIntegrationProperties);
      genericIntegrationInstance.init();
      genericIntegrationInstance.listeners.fire('onTargetReady', {});
    </script>

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:

    genericIntegrationProperties.configurationService = 'integration/configurationjs.php';

    The previous example would end up like this:

    <script>
      var genericIntegrationProperties = {};
      genericIntegrationProperties.target = document.getElementById('htmlEditor');
      genericIntegrationProperties.toolbar = document.getElementById('toolbar');
     
      // We just added this line:
      genericIntegrationProperties.configurationService = 'integration/configurationjs.php';
     
      // GenericIntegration instance.
      var genericIntegrationInstance = new WirisPlugin.GenericIntegration(genericIntegrationProperties);
      genericIntegrationInstance.init();
      genericIntegrationInstance.listeners.fire('onTargetReady', {});
    </script>

ASP .NET

To install the ASP .NET services, please, follow the steps below:

  1. Download and extract MathType for generic HTML editor - ASP.NET.

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

  3. Set the following value for the configurationService property:

    genericIntegrationProperties.configurationService = 'integration/configurationjs.aspx';

    The previous example would end up like this:

    <script>
      var genericIntegrationProperties = {};
      genericIntegrationProperties.target = document.getElementById('htmlEditor');
      genericIntegrationProperties.toolbar = document.getElementById('toolbar');
     
      // We just added this line:
      genericIntegrationProperties.configurationService = 'integration/configurationjs.aspx';
     
      // GenericIntegration instance.
      var genericIntegrationInstance = new WirisPlugin.GenericIntegration(genericIntegrationProperties);
      genericIntegrationInstance.init();
      genericIntegrationInstance.listeners.fire('onTargetReady', {});
    </script>

Ruby on Rails

To install the Ruby on Rails services, please, follow the steps below:

  1. Download and extract MathType for generic HTML editor - Ruby on Rails.

  2. Install the wirispluginengine.gem gem.

    gem install -l wirispluginengine.gem
    
  3. Set the following value for the configurationService property:

    genericIntegrationProperties.configurationService = '/wirispluginengine/integration/configurationjs';

    The previous example would end up like this:

    <script>
      var genericIntegrationProperties = {};
      genericIntegrationProperties.target = document.getElementById('htmlEditor');
      genericIntegrationProperties.toolbar = document.getElementById('toolbar');
     
      // We just added this line:
      genericIntegrationProperties.configurationService = '/wirispluginengine/integration/configurationjs';
     
      // GenericIntegration instance.
      var genericIntegrationInstance = new WirisPlugin.GenericIntegration(genericIntegrationProperties);
      genericIntegrationInstance.init();
      genericIntegrationInstance.listeners.fire('onTargetReady', {});
    </script>

Documentation

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

install

npm i @wiris/mathtype-generic

Downloadsweekly downloads

44

version

7.14.0

license

GPL-3.0

last publish

collaborators

  • avatar
Report a vulnerability