Mathematical and Chemical Formula Editor（MML-Editor2）
Features
WYSIWYG "Mathematical and Chemical Formulas" Editor
Menu structure according to the learning contents from elementary school to high school
Multi-line input possible in editor
Various output formats
Output within an HTML element such as a DIV
MathML source output
LaTex source output
SVG Image Output
PNG image output
Re-editing mathematical and chemical formulas output within HTML elements such as DIV
Multilingual support (24 languages supported)
Working sample
Download
Folder structure
+ lib (フォルダ)
| + font (folder) (Fonts folder included with jQuery matheditor.js)
| + Symbola.eot
| + Symbola.otf
| + Symbola.svg
| + Symbola.ttf
| + Symbola.woff
| + Symbola.woff2
| + Symbola-basic.eot
| + Symbola-basic.ttf
| + Symbola-basic.woff
| + Symbola-basic.woff2
| + img (folder) (Image folder for MML-Editor2)
| + close_16.png
| + iconTitle_24.png
| + resizeHandle_20.png
| + trashBox_32.png
| + lang.js (For multilingual support of MML-Editor2)
| + matheditor.css (JQuery matheditor.js css, some changes)
| + matheditor.js (JQuery matheditor.js js, some changes)
| + mathquill.css (mathquill css, some changes)
| + mathquill.js (mathquill js, some changes)
| + MML-Editor2.css (MML-Editor2 css)
| + MML-Editor2_main.js (MML-Editor2 js body)
+ index.html (MML-Editor2 sample page)
+ MML-Editor2.js (MML-Editor2 Loader JS)
* MML-Editor2.js and lib (folder) must be placed at the same hierarchy level.
How to Use
JQuery and MathJax are required. After loading these, load MML-Editor2.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="./MML-Editor2.js"></script>
By loading MML-Editor2.js, other required .js and .css will also be loaded.
The various functions of MML-Editor2 are accessed using the methods of the objMmlEditor object.
Multilingual
The menus of this system, "Mathematical and Chemical Formula Editor (MML-Editor2)",
Japanese (jq), English (en), Korean (kr), French (fr), Spanish (es), Italian (it), German (de), Russian (ru),
Chinese (Simplified) (zh), Chinese (Traditional) (zm), Portuguese (pt), Dutch (nl), Greek (el), Turkish (tr),
Indonesian (id), Vietnamese (vi), Thai (th), Hindi (hi), Cambodian (km), Tagalog (tl), Nepali (ne),
Burmese (my), Mongolian (mn), Ukrainian (uk)
It supports 24 languages, but for some mathematical symbols, we use the ones used in Japan, regardless of the language used.
The language used depends on the language settings of your browser.
<script src="./MML-Editor2.js?en"></script>（English examples）
You can also specify the language to be used in the MML-Editor2.js parameters, like so:
Action mode
Editor Mode
Enter mathematical or chemical formulas into the DIV element with class="mmleditor2Editable".
If callback is not set, editor mode will be used.
Example
<div class="mmleditor2Editable" id="textArea1" style="width: 600px; height: 180px; border: 1px solid #000000; padding: 8px; font-size: 14px; overflow-y: auto; overflow-x: hidden;" contenteditable="true"></div>
Source Mode
It outputs mathematical and chemical formula source in MathML or LaTex.
The output result is received by the callback function set with the setCallback method.
If callback is set, then source mode is assumed.
Example
objMmlEditor.setCallback( function(data) { console.log(data); });
Methods
show
Displays the mathematical/chemical formula editor.
The argument is the mathematical or chemical formula to be displayed in the editor, specified in LaTeX notation (note that it is \\, not \).
Example (no initial display)
Example(Showing)
objMmlEditor.show('\\frac{1}{2}');
hide
Hides the formula editor.
Example
setCallback
Set a callback function that receives the source of the MathML or LaTex formula.
Example（Set callback）
objMmlEditor.setCallback( function(data) {
console.log(data);
});
Example（Unset callback）
objMmlEditor.setCallback(null);
setMenu
Specifies the menu structure to be displayed in the editor.
Please set the menu type in the argument.
el：Elementary school
mj：Junior high school (mathematics)
mc：High school liberal arts (mathematics)
ms：High school science (mathematics)
cj：Junior high school (chemistry)
ch：High school (chemistry)
al：All (default)
Example（Elementary school）
objMmlEditor.setMenu('el');
setPosition
Specifies the display position of the editor.
Please set the display position in the argument.
lt：Top left corner of the window
rt：Top right corner of the window
rb：Bottom right corner of the window (default)
lb：Bottom left corner of the window
ct：Center of the window
pv：Previous display position
Example（Center of the window）
objMmlEditor.setPosition('ct');
setFormat
Specifies the output format.
Please set the output format in the argument.
mml：MathML (default)
latex：LaTex
svg：SVG image
png：PNG image
Example（LaTex）
objMmlEditor.setFormat('latex');
setSize
Sets the size of the editor.
Set the width and height of the editor as arguments.
The setting range is 540px to 1200px for width and 200px to 800px for height.
Example（width 800px, height 200px）
objMmlEditor.setSize(800, 250);
setMath
Enter the mathematical or chemical formula in the editing area.
Please set the mathematical or chemical formula in LaTeX notation as the argument (please note that it is \\, not \).
Example(Showing)
objMmlEditor.setMath('\\frac{1}{2}');
destroy
Destroys the instance of the objMmlEditor object.
Example
Tips
Copyright
The copyright of this system, "Mathematical and Chemical Formula Editor (MML-Editor2)", belongs to the author.
There are no restrictions on use, including commercial use, modification, or redistribution.
In this system,
MathQuill(http://mathquill.com/、https://github.com/mathquill/mathquill) ：Mozilla Public License Version 2.0
JQuery matheditor.js(https://www.jqueryscript.net/text/Simple-WYSIWYG-Math-Editor-With-jQuery-Mathquill-matheditor-js.html#google_vignette)：MIT License
Since this software uses some of the software with enhanced functions, you must comply with the license terms of the software in question.