Simple Integration Guide: Adding Math Equations and Chemistry Formulas to Froala Editor
Wondering how to type math equations and chemistry formulas in Froala Editor?
By integrating Froala with MathType, you can easily insert math equations and chemistry formulas in the Froala editor. In this blog post, we will learn how to integrate Froala and mathType.
What is MathType?
MathType is an intuitive solution for creating quality math formulas in your documents and digital content. It is the leading formula editor and equation writer used by K-12 and university STEM students and faculty worldwide.
MathType has a user-friendly interface that makes writing scientific content on your computer fun. Forget about having to learn LaTeX to write math on a computer.
MathType has a handwriting interface powered with AI to convert your handwritten formula into a clean digital equation ready to be used in the editor.
MathType is not just for math equations but also provides a tool for handling chemistry formulas.
MathType is designed to meet accessibility standards in order to make the software accessible to individuals with disabilities. It follows the WCAG 2.0 guidelines from W3C, making sure content can be read by assistive technologies and operated with a keyboard.
Incorporating Froala HTML editor includes MathType capabilities, enabling easy writing of math equations and chemical formulas in your WYSIWYG editor.
How Can I Integrate MathType With Froala?
- include Froala stylesheet and scripts files and the element you want to initialize the editor in your HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
// Froala Stylesheet
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
</head>
<body>
<!-- HTML element for displaying the editor -->
<div id="editor"></div>
<!-- Froala JS file -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>
</body>
</html>
- Install the MathType for Froala npm module by running the following command:
npm i @wiris/mathtype-froala3
- Â Include the MathType-Froala plugin script in your HTML page
<script src="node_modules/@wiris/mathtype-froala3/wiris.js"></script>
- Initialize the editor
new FroalaEditor('#editor', {
// Add MathType and ChemType buttons to the toolbar and the image menu:
toolbarButtons: ['wirisEditor', 'wirisChemistry'],
quickInsertButtons: ['image', 'table', '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', 'textarea', 'a', 'iframe', 'object', 'video', 'style', 'script', '.fa', '.fr-emoticon', '.fr-inner', 'path', 'line', 'hr'],
});
In the above code:
- We customized the editor toolbar buttons to display a button for adding math equations “wirisEditor“ and a button for adding chemistry formulas “wirisChemistry“ using `toolbarButtons` option.
- We also customized the `quickInsertButtons` option to display the MathType buttons on the Quick Insert toolbar. This toolbar appears when you have the cursor on a blank new line.
- Additionally, we set the `htmlAllowedTags`, `htmlAllowedAttrs`, and `htmlAllowedEmptyTags` properties to ensure proper rendering of formulas in the editor and while displaying it later on the HTML page outside the editor.
- htmlAllowedTags is an array containing allowed tags to be inserted in the editor, by default it’s set to
['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'queue', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'style', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr']
Since MathType uses other HTML tags, we customized htmlAllowedTags to be
htmlAllowedTags:Â ['.*'],
This allows MathType custom tags to be inserted in the editor.
- htmlAllowedAttrs is an array containing allowed attributes to be used for tags, by default it’s set to
['accept', 'accept-charset', 'accesskey', 'action', 'align', 'allowfullscreen', 'allowtransparency', 'alt', 'aria-.*', 'async', 'autocomplete', 'autofocus', 'autoplay', 'autosave', 'background', 'bgcolor', 'border', 'charset', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'color', 'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls', 'coords', 'data', 'data-.*', 'datetime', 'default', 'defer', 'dir', 'dirname', 'disabled', 'download', 'draggable', 'dropzone', 'enctype', 'for', 'form', 'formaction', 'frameborder', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'http-equiv', 'icon', 'id', 'ismap', 'itemprop', 'keytype', 'kind', 'label', 'lang', 'language', 'list', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'mozallowfullscreen', 'multiple', 'muted', 'name', 'novalidate', 'open', 'optimum', 'pattern', 'ping', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'reversed', 'rows', 'rowspan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step', 'summary', 'spellcheck', 'style', 'tabindex', 'target', 'title', 'type', 'translate', 'usemap', 'value', 'valign', 'webkitallowfullscreen', 'width', 'wrap']
Since MathType uses other HTML attributes, we customized htmlAllowedAttrs to be
htmlAllowedAttrs: ['.*'],
- htmlAllowedEmptyTags is an array containing a list of tags that are not removed when they have no content inside. We have added ‘mprescripts’ and ‘none’ tags since these tags can be inserted by MathType and could be empty.
- htmlAllowedTags is an array containing allowed tags to be inserted in the editor, by default it’s set to
Customize MathType Editor
MathType offers various choices for adjusting its design, enabling you to coordinate it with your application’s interface and enhance the user’s experience. Refer to the MathType documentation for a comprehensive list of available choices. Use the mathTypeParameters option to send these parameters. One way to adjust the MathEditor language is by following this process.
mathTypeParameters: {
editorParameters: { Language: 'es' },
},
You can also disable the handwriting interface by setting the detectHand option to false.
mathTypeParameters: {
editorParameters: { Language: 'es' },
detectHand: false
},
Here is the full page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
<title>Froala & MathType integration</title>
</head>
<body>
<!-- HTML element fo displaying the editor -->
<div id="editor"></div>
<!-- Froala JS file -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>
<script src="node_modules/@wiris/mathtype-froala3/wiris.js"></script>
<script>
new FroalaEditor('#editor', {
// Add MathType and ChemType buttons to the toolbar and the image menu:
toolbarButtons: ['wirisEditor', 'wirisChemistry'],
quickInsertButtons: ['image', 'table', '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', 'textarea', 'a', 'iframe', 'object', 'video', 'style', 'script', '.fa', '.fr-emoticon', '.fr-inner', 'path', 'line', 'hr'],
//mathType options
mathTypeParameters: {
editorParameters: {
Language: 'es',
backgroundColor: '#333',
detectHand: false
},
},
});
</script>
</body>
</html>
How Can I Render MathML Data and Store Generated Images Locally?
The MathType npm package uses remotely hosted services to display MathML content remotely. Nevertheless, we suggest that you set up these services on your backend. This will enable you to, among other capabilities, set up the service and save the images produced by MathType on your server.
Plugins are available for Java, PHP, .NET, and Ruby on Rails. If you are using any of these technologies, make sure to get the plugin for your backend technology from here.
How To Display Math Equations and Chemistry Formulas Outside The Editor?
To display mathematical formulas on the webpage where content produced by the Froala 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>
How To Insert Math Equations and Chemistry Formulas Effortlessly?
Once you integrate MathType, there will be two icons added to the Froala toolbar.
Clicking on the square root icon will display all the symbols available for math equations. Once you are done, click on the OK button. The equation will be inserted into your WYSIWYG editor.
Clicking on the C icon will display all the symbols available for chemistry formulas. Once you are done, click on the OK button. The formula will be inserted into your WYSIWYG editor.
Conclusion
To sum up, integrating Froala with MathType provides a seamless solution to include math equations and chemistry formulas in your content creation workflow. By following the instructions provided in this blog post, you can enhance the functionality of Froala Editor, making it easier to create and display complex scientific content. Whether you are a student, educator, or professional in the STEM field, leveraging MathType’s capabilities within Froala Editor can streamline your workflow and improve the accessibility of your mathematical and chemical content. Embracing this integration opens up a world of possibilities for effectively communicating scientific concepts in a visually appealing and interactive manner.
Are you prepared to enhance your content by including flawless math equations and chemistry formulas? Try out the combination of Froala Editor and MathType now to see their powerful capabilities. Begin generating visually impressive and engaging scientific content with ease. Give it a try now and access a higher level of creativity!
No comment yet, add your voice below!