数式・化学式エディタ（MML-Editor2）
特徴
WYSIWYGな「数式・化学式」エディタ
小学校から高等学校までの学習内容に応じたメニュー構成
エディタ内で複数行の入力が可能
多様な出力形式
DIV等のHTML要素内に出力
MathMLソース出力
LaTexソース出力
SVGイメージ出力
PNGイメージ出力
DIV等のHTML要素内に出力した数式・化学式の再編集
多言語対応（24言語対応）
動作サンプル
ダウンロード
フォルダ構成
+ lib (フォルダ)
| + font (フォルダ) (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 (フォルダ) (MML-Editor2 用のイメージフォルダ)
| + close_16.png
| + iconTitle_24.png
| + resizeHandle_20.png
| + trashBox_32.png
| + lang.js (MML-Editor2 の多言語対応用)
| + matheditor.css (JQuery matheditor.js のcss、一部変更有)
| + matheditor.js (JQuery matheditor.js のjs、一部変更有)
| + mathquill.css (mathquill のcss、一部変更有)
| + mathquill.js (mathquill のjs、一部変更有)
| + MML-Editor2.css (MML-Editor2 のcss)
| + MML-Editor2_main.js (MML-Editor2 のjs本体)
+ index.html (MML-Editor2 のサンプルページ)
+ MML-Editor2.js (MML-Editor2 のローダJS)
※ MML-Editor2.js と lib(フォルダ) は、同一の階層に設置する必要があります。
利用方法
JQueryとMathJaxは必須です。これらを読み込んだ後に、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>
MML-Editor2.js を読み込むことで、他に必要な .js や .css は、読込まれます。
MML-Editor2の各機能へは、objMmlEditor オブジェクトのメソッドによりアクセスします。
多言語対応
本システム「数式・化学式エディタ（MML-Editor2）」のメニュー等は、
日本語(jq)、英語(en)、韓国語(kr)、フランス語(fr)、スペイン語(es)、イタリア語(it)、ドイツ語(de)、ロシア語(ru)、
中国語（簡体）(zh)、中国語（繁体）(zm)、ポルトガル語(pt)、オランダ語(nl)、ギリシャ語(el)、トルコ語(tr)、
インドネシア語(id)、ベトナム語(vi)、タイ語th)、ヒンディー語(hi)、カンボジア語(km)、タガログ語(tl)、ネパール語(ne)、
ビルマ語(my)、モンゴル語(mn)、ウクライナ語(uk)
の 24言語に対応していますが、一部の数学記号については、使用言語によらず、日本で使用しているものを採用しています。
使用する言語は、ブラウザの言語設定に依存しますが、
<script src="./MML-Editor2.js?en"></script>（英語の例）
の様に、MML-Editor2.js のパラメータで、使用言語を指定することもできます。
動作モード
エディタモード
class="mmleditor2Editable"を設定してあるDIV要素に、数式や化学式を入力します。
callbackが設定されていない場合、エディタモードとなります。
例
<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>
ソースモード
MathML 又は LaTex の数式や化学式のソースを出力します。
出力結果は、setCallbackメソッドで設定したcallback関数で受け取ります。
callbackが設定されている場合、ソースモードとなります。
例
objMmlEditor.setCallback( function(data) { console.log(data); });
メソッド
show
数式・化学式エディタを表示します。
引数には、エディタに表示する数式又は化学式を、LaTex標記で指定します（ \ではなく、\\となる点に注意してください。）。
例（初期表示なし）
例（を表示）
objMmlEditor.show('\\frac{1}{2}');
setCallback
MathML 又は LaTex の数式や化学式のソースを受け取るcallback関数を設定します。
例（callbackを設定）
objMmlEditor.setCallback( function(data) {
console.log(data);
});
例（callbackの設定を解除）
objMmlEditor.setCallback(null);
setMenu
エディタに表示するメニュー構成を指定します。
引数にメニュー種別を設定してください。
el：小学校
mj：中学校（数学）
mc：高校文系（数学）
ms：高校理系（数学）
cj：中学校（化学）
ch：高校（化学）
al：すべて（デフォルト）
例（小学校）
objMmlEditor.setMenu('el');
setPosition
エディタの表示位置を指定します。
引数に表示位置を設定してください。
lt：ウィンドウの左上
rt：ウィンドウの右上
rb：ウィンドウの右下（デフォルト）
lb：ウィンドウの左下
ct：ウィンドウの中央
pv：直前の表示位置
例（ウィンドウの中央）
objMmlEditor.setPosition('ct');
setFormat
出力形式を指定します。
引数に出力形式を設定してください。
mml：MathML（デフォルト）
latex：LaTex
svg：SVGイメージ
png：PNGイメージ
例（LaTex）
objMmlEditor.setFormat('latex');
setSize
エディタのサイズを設定します。
引数にエディタの幅と高さを設定してください。
設定できる範囲は、幅が540px～1200px、高さが200px～800px となります。
例（幅800px、高さ200px）
objMmlEditor.setSize(800, 250);
setMath
編集エリアに数式・化学式をセットします。
引数にLaTex標記の数式・化学式を設定してください（ \ではなく、\\となる点に注意してください。）。
例（を表示）
objMmlEditor.setMath('\\frac{1}{2}');
destroyメソッド
objMmlEditorオブジェクトのインスタンスを破棄します。
例
Tips
著作権
本システム「数式・化学式エディタ（MML-Editor2）」の著作権は、作者に帰属しています。
ご利用にあたっての制限は、商用利用や改編、再配付を含め、設けていませんが、
本システムでは、
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
を、一部機能拡張をして使用していますので、その部分については、当該ソフトウェアのライセンス条項に従ってください。