Skip to content

3rd Party Integration

MathType Editor

MathType is the leading formula editor and equation writer used by K-12 and university STEM students and faculty worldwide, developed by Wiris.MathType provides a user-friendly interface as well as professional and high quality math formulas. These are some of the key features of MathType’s plugin for Froala:

- Wide range of symbols and mathematical expressions
- Right to left language support (arabic)
- Accessibility
- Latex support
- Support for chemical symbols and formulas (ChemType)

Start typing or handwriting math equations and chemical formulas in Froala with MathType!

To integrate the Math Type on your website there are a few simple steps to follow.

  1. Download the latest Froala Editor version and also the latest MathType version.
  2. Go to MathType website and follow the steps that are specific for your environment.

Try it yourself:


1. Install the MathType for Froala npm module:
npm install @wiris/mathtype-froala3
2. Load the module into your project:
<script src = "node_modules/@wiris/mathtype-froala3/wiris.js"></script>
3. Update Froala configuration options:
// From FroaLa 'Get started' section https://froala.com/wysiwyg-editor/docs/overview/ 
new FroalaEditor('.selector', { 
// Add MathType and ChemType buttons to the toolbar and the image menu: 
toolbar: ['wirisEditor', 'wirisChemistry'],
imageEditButtons: ['wirisEditor','wirisChemistry'], 
// 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/parametersPregionaL_properties
// mathTypeParameters: { 
// editorParameters: { Language: 'es' },
//},
}