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' },
//},
}
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_540669201" class="gglcptch_recaptcha"></div>
<noscript>
<div style="width: 302px;">
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe>
</div>
</div>
<div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea>
</div>
</div>
</noscript></div>