Froala Editor v4.2.2 is hereLEARN MORE
It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
3rd Party Integration
MathType
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
- Handwriting recognition
- 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 Wirils plugin on your website there are a few simple steps to follow.
- Download the latest Froala Editor version and also the latest MathType version.
- Go to MathType website and follow the stpes that are specific for your environment.
1. Install the MathType for Froala npm module:
npm install @wiris/amthtype-froala3
2. Load the module into your project:
<script src="node_modules/@wiris/mathtype-froala3/wiris.js.x/script"></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_propert ies
// mathTypeParameters: {
// editorParameters: { Language: 'es' },
//},
}
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_propert ies
// mathTypeParameters: {
// editorParameters: { Language: 'es' },
//},
}