@wiris/mathtype-froala

⚠️ Package will no longer support Froala 2: mathtype-froala will be compatible with Froala 3 and higher versions on our next major release (v8.0.0).

MathType for Froala Version 2

Type and handwrite mathematical notation with MathType.

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

Note: This package supports Froala V2 which is currently discontinued. If you're using Froala V3 or above, download @wiris/mathtype-froala3 package, instead.

Table of Contents

• Install instructions
• Services
• Documentation
• Displaying on Target Page
• Privacy policy

Install instructions

1. Install the npm module:

   npm install @wiris/mathtype-froala
   

2. Load the module into your project:

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

3. Update Froala configuration:

   • Add MathType and ChemType buttons to the toolbar and the image menu:

     ${}.froalaEditor({
       // Enable the plugin.
       pluginsEnabled: ['wiris'],
       
       // Add the buttons to the toolbar and image edit buttons
       toolbarButtons:   ['wirisEditor', 'wirisChemistry'],
       toolbarButtonsMD: ['wirisEditor', 'wirisChemistry'],
       toolbarButtonsSM: ['wirisEditor', 'wirisChemistry'],
       toolbarButtonsXS: ['wirisEditor', 'wirisChemistry'],
       imageEditButtons: ['wirisEditor', 'wirisChemistry', 'imageRemove'],
     
     
       // Allow all tags, in order to allow MathML:
       htmlAllowedTags:  ['.*'],
       htmlAllowedAttrs: ['.*'],
       
       // Allow empty tags on these next elements for proper formula rendering:
       htmlAllowedEmptyTags: ['mprescripts', 'none'],
       
       // In case you are using a different Froala editor language than default,
       // language: 'es',
       // You can choose the language for the MathType editor, too:
       // @see: https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/parameters#regional_properties
       // mathTypeParameters: {
       //   editorParameters: { language: 'es' },
       // },
     
     })
     

     Notice the example assumes this directory structure:

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

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 Java, PHP, .NET and Ruby on Rails. If you use any of these technologies, please download the plugin for your backend technology from here.

In order to install the plugin along with the correspondent services, please follow the Froala install instructions.

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:

<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>

Documentation

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

• Install instructions
• 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.