十分钟打造一款在线的数学公式编辑器
最近，一个朋友要求做一个数学编辑器，方便数学公式的录入，特别是微积分、矩阵等公式，普通录入非常麻烦，这里，花了一周时间，做了一个数学公式在线编辑功能。
下面记录一下打造的过程。但是，目前很遗憾，这个系统还不支持导入导出功能。
如何实现web录入的试题导出到word或者把word试题导入到系统，如果您有好的方法，欢迎推荐。（感觉要自己写解析Latex）
在线体验 http://demo.dotnetcms.org/math 免费下载 https://files.cnblogs.com/files/mqingqing123/math5.0.rar
1.MathJax
在数学公式里，最流行的是 http://www.mathjax.org ，Mathjax支持数理化等各种公式，其实如果你希望只针对数学录入，可以使用 https://katex.org/ KaTex更简单、速度更快。
Mathjax的文档里列出了MathJax目前支持的LaTex语法。对于未实现的语法，可以自定义宏来实现。
从声明里看到实现了 sin，cos，tan，ctan等都支持，但是一些反正切没实现。
所以，在MathJax的全局配置里，定义一个macros
<script> MathJax = { options: { enableMenu: false, a11y: { speech: false, // switch on speech output braille: false, // switch on Braille output subtitles: false } }, tex: { inlineMath: [['@', '@'], ['\\(', '\\)']], displayMath: [['@@', '@@'], ['\\[', '\\]']], macros: { arcsec: '\\DeclareMathOperator{\\arcsec}{arcsec}\\arcsec', arccsc: '\\DeclareMathOperator{\\arccsc}{arccsc}\\arccsc', arccot: '\\DeclareMathOperator{\\arccot}{arccot}\\arccot' } } } </script>
然后引入Mathjax库
<script src="../js/math/tex-chtml-full.js"></script>
另外，对于数学公式的“开始”和“结束”，MathJax默认使用"\("和"\)"作为分割的，
如果是块状的则使用"\\["和"\\]"区分，
参考下图，左边是录入的内容，右边是显示的结果。
但是Mathjax允许你自定义公式识别符，
上面代码，我增加了“@”作为行内公式，使用"@@"作为块公式。
其实，在选型时，作者测试了“$”或者“#”作为分隔符，但是最终确定使用@符号，最根本的原因是：
在录入时，只有@符号，在中英模式下是一样的。
现在老师可以像写文本一样，写题目了。
2.引入CodeMirror
在录入页面，引入Codemirror美化录入界面。
毕竟，textarea默认太丑了。
<link href="../js/codeMirror/lib/codemirror.css" rel="stylesheet" /> <script src="../js/codeMirror/lib/codemirror.js"></script>
初始化文本框，整个布局分左右布局，
左边是文本框textarea进入录入，右边是iframe进行预览，
在父div里，设置display为flex，进行左右布局，这样就不用 float 飞来飞去的了。
<div style="display:flex">
<div style="width:50%">
<textarea id="txt_question"></textarea>
</div>
<div style="width:50%; background-color:#f2f2f2">
<iframe id=preview frameborder="0"
width="100%"
scrolling="no" >
</iframe>
</div>
<script> var delay; var editor = CodeMirror.fromTextArea(document.getElementById('txt_question'), { lineNumbers: true, mode: 'text/html', lineWrapping:true }); editor.on("change", function () { clearTimeout(delay); delay = setTimeout(updatePreview, 500); }); function updatePreview() { var iframe = document.getElementById('preview'); var doc2 = iframe.contentDocument || iframe.contentWindow.document; let body2 = doc2.getElementsByTagName('body')[0]; var data = editor.getValue().replace(/\n/g, "<br>"); body2.innerHTML = "<div class=mathjax-qmx>" + data + "</div> "; if(doc2.defaultView.MathJax!=null) { doc2.defaultView.MathJax.typeset(); } } setTimeout(updatePreview, 500); </script>
在预览时，需要通过JS引入Mathjax
<script>
$(document).ready(function () {
let iframe = document.getElementById("preview");
let iframeWindow = iframe.contentWindow || iframe.contentDocument.document || iframe.contentDocument;
let doc3 = iframeWindow.document;
let head3 = doc3.getElementsByTagName('head')[0];
let body3 = doc3.getElementsByTagName('body')[0];
let js1 = doc3.createElement('script');
js1.src = "../js/math/math-config.js";
js1.type = 'text/javascript';
head3.appendChild(js1);
let js2 = doc3.createElement('script');
js2.src = "../js/math/tex-mml-chtml.js";
js2.type = 'text/javascript';
js2.async = true;
js2.charset = 'utf-8';
head3.appendChild(js2);
});
</script>
最后使用codemirror提供的getValue可以获取值。
另外，在预览时，会把回车“\n”替换为“<br>”
var question = editor.getValue().replace(/\n/g, "<br>")+"";
这样就可以获取录入的值。
3.打造菜单
为了方便录入，打造了一个菜单，
菜单布局父class是math-menu，子菜单由sub-math-menu包裹。下面是HTML代码
<div class="math-menu" data-editorid="editor">
<a href="###">菜单1</a>
<div class="sub-math-menu">
<span class="subnavbtn9">希腊字母 <span class="drop"></span> </span>
<div class="subnav-content9">
<div>小写字母</div>
<a class="add" data-math="\alpha">@\alpha@</a>
<div style="clear:both"></div>
</div>
</div>
</div>
下图是预览效果。
下面是CSS样式
.math-menu {
overflow: hidden;
background-color: #f2f2f2;
}
.math-menu a {
float: left;
font-size: 16px;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.math-menu .sub-math-menu a {
font-size: 14px;
padding: 12px 14px;
}
.sub-math-menu {
float: left;
overflow: hidden;
}
.sub-math-menu .subnavbtn9 {
font-size: 16px;
border: none;
outline: none;
color: #000;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
display:flex;
}
.math-menu a:hover, .sub-math-menu:hover .subnavbtn9 {
background-color: #ccc;
}
.subnav-content9 {
display: none;
position:absolute;
background-color: #ccc;
z-index: 1000;
left:12.5%;
width: 75%;
}
.subnav-content9 a {
float: left;
color: #000;
text-decoration: none;
height:50px;
}
.subnav-content9 a:hover {
background-color: #ffffff;
color: black;
}
.drop{
margin-top:10px;
margin-left:2px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 7px solid #333;
}
.CodeMirror {
border: 1px solid #eee;
height: 400px;
word-break:break-all;
font-family:Verdana;
}
.add{ cursor:pointer; }
.layui-card{ margin-bottom:15px; }
增加鼠标经过，菜单显示效果。
注意：这里使用的是mouseover事件，而不是mouseenter事件。
<script>
$('.sub-math-menu').mouseover(function () {
$(this).find(".subnav-content9").show();
})
$('.sub-math-menu').mouseout(function () {
$(this).find(".subnav-content9").hide();
})
$(".add").click(
function ()
{
var ed= $(this).parent().parent().parent().data("editorid");
if(ed=="editor")
{
editor.replaceSelection("@"+$(this).data("math")+"@")
}
else
{
editor2.replaceSelection("@"+$(this).data("math")+"@")
}
$(this).parent().parent().find(".subnav-content9").hide();
}
);
</script>
到此，大功告成。
4.打造普通模式（小白模式）
当然，有时候你可能希望更多的控制，例如插入表格）
这里使用Tinymce集成Mathjax实现，其中，这里使用一个插件：https://github.com/dimakorotkov/tinymce-mathjax
代码里，扩展了Tinymce菜单的定制。
默认这个插件提供的弹窗太小，可以放大，修改后代码如下：
tinymce.PluginManager.add('mathjax', function(editor, url) {
// plugin configuration options
let mathjaxClassName = editor.settings.mathjax.className || "math-tex";
let mathjaxTempClassName = mathjaxClassName + '-original';
mathjaxSymbols = editor.settings.mathjax.symbols || { start: '\\(', end: '\\) ' };
let mathjaxUrl = editor.settings.mathjax.lib || null;
let mathjaxConfigUrl = (editor.settings.mathjax.configUrl || url + '/config.js') + '?class=' + mathjaxTempClassName;
let mathjaxScripts = [mathjaxConfigUrl];
if (mathjaxUrl) {
mathjaxScripts.push(mathjaxUrl);
}
// load mathjax and its config on editor init
editor.on('init', function () {
for (let i = 0; i < mathjaxScripts.length; i++) {
let id = editor.dom.uniqueId();
let script = editor.dom.create('script', {id: id, type: 'text/javascript', src: mathjaxScripts[i]});
editor.getDoc().getElementsByTagName('head')[0].appendChild(script);
}
});
// remove extra tags on get content
editor.on('GetContent', function (e) {
let div = editor.dom.create('div');
div.innerHTML = e.content;
let elements = div.querySelectorAll('.' + mathjaxClassName);
for (let i = 0; i < elements.length; i++) {
let children = elements[i].querySelectorAll('span');
for (let j = 0; j < children.length; j++) {
children[j].remove();
}
let latex = elements[i].getAttribute('data-latex');
elements[i].removeAttribute('contenteditable');
elements[i].removeAttribute('style');
elements[i].removeAttribute('data-latex');
elements[i].innerHTML = latex;
}
e.content = div.innerHTML;
});
let checkElement = function(element) {
if (element.childNodes.length != 2) {
element.setAttribute('contenteditable', false);
element.style.cursor = 'pointer';
let latex = element.getAttribute('data-latex') || element.innerHTML;
element.setAttribute('data-latex', latex);
element.innerHTML = '';
let math = editor.dom.create('span');
math.innerHTML = latex;
math.classList.add(mathjaxTempClassName);
element.appendChild(math);
let dummy = editor.dom.create('span');
dummy.classList.add('dummy');
dummy.innerHTML = 'dummy';
dummy.setAttribute('hidden', 'hidden');
element.appendChild(dummy);
}
};
// add dummy tag on set content
editor.on('BeforeSetContent', function (e) {
let div = editor.dom.create('div');
div.innerHTML = e.content;
let elements = div.querySelectorAll('.' + mathjaxClassName);
for (let i = 0 ; i < elements.length; i++) {
checkElement(elements[i]);
}
e.content = div.innerHTML;
});
// refresh mathjax on set content
editor.on('SetContent', function(e) {
if (editor.getDoc().defaultView.MathJax) {
editor.getDoc().defaultView.MathJax.startup.getComponents();
editor.getDoc().defaultView.MathJax.typeset();
}
});
// add button to tinimce
editor.ui.registry.addButton('插入公式', {
text: '插入公式',
tooltip: '插入公式',
onAction: function () {
openMathjaxEditor();
}
});
// handle click on existing
editor.on("click", function (e) {
let closest = e.target.closest('.' + mathjaxClassName);
if (closest) {
openMathjaxEditor(closest);
}
});
// open window with editor
let openMathjaxEditor = function(target) {
let mathjaxId = editor.dom.uniqueId();
let latex = '';
if (target) {
latex_attribute = target.getAttribute('data-latex');
if (latex_attribute.length >= (mathjaxSymbols.start + mathjaxSymbols.end).length) {
latex = latex_attribute.substr(mathjaxSymbols.start.length, latex_attribute.length - (mathjaxSymbols.start + mathjaxSymbols.end).length);
}
}
// show new window
editor.windowManager.open({
title: 'Mathjax',
size: 'medium',
body: {
type: 'panel',
items: [
{
type: 'htmlpanel',
html: '<div > <input onclick=changesybol() type=checkbox id=cb_br name=cb_br>换行 <a href="https://www.cnblogs.com/mqingqing123/p/12063096.html" target="blank" >LaTex说明</a> <a href="http://www.dotnetcms.org" target="blank" >启明星官网</a> <style>.tox-textarea{height:150px !important; border-radius:0px;}</style> </div>'
},
{
type: 'textarea',
name: 'title'
},
{
type: 'htmlpanel',
html: '<iframe id="' + mathjaxId + '" style="width:98%; min-height: 50px; " ></iframe>'
}
]
},
buttons: [{ type: 'submit', text: '确定' }],
onSubmit: function onsubmit(api) {
let value = api.getData().title.trim();
if (target) {
target.innerHTML = '';
target.setAttribute('data-latex', getMathText(value));
checkElement(target);
} else {
let newElement = editor.getDoc().createElement('span');
newElement.innerHTML = getMathText(value);
newElement.classList.add(mathjaxClassName);
checkElement(newElement);
editor.insertContent(newElement.outerHTML);
}
editor.getDoc().defaultView.MathJax.startup.getComponents();
editor.getDoc().defaultView.MathJax.typeset();
api.close();
},
onChange: function(api) {
var value = api.getData().title.trim();
if (value != latex) {
refreshDialogMathjax(value, document.getElementById(mathjaxId));
latex = value;
}
},
initialData: {title: latex}
});
if (mathjaxSymbols.start == "\\(") {
document.getElementById("cb_br").checked = false;
}
else {
document.getElementById("cb_br").checked = true;
}
// add scripts to iframe
let iframe = document.getElementById(mathjaxId);
let iframeWindow = iframe.contentWindow || iframe.contentDocument.document || iframe.contentDocument;
let iframeDocument = iframeWindow.document;
let iframeHead = iframeDocument.getElementsByTagName('head')[0];
let iframeBody = iframeDocument.getElementsByTagName('body')[0];
// get latex for mathjax from simple text
let getMathText = function (value, symbols) {
if (!symbols) {
symbols = mathjaxSymbols;
}
return symbols.start + ' ' + value + ' ' + symbols.end ;
};
// refresh latex in mathjax iframe
let refreshDialogMathjax = function(latex) {
let MathJax = iframeWindow.MathJax;
let div = iframeBody.querySelector('div');
if (!div) {
div = iframeDocument.createElement('div');
div.classList.add(mathjaxTempClassName);
iframeBody.appendChild(div);
}
div.innerHTML = getMathText(latex, {start: '$$', end: '$$'});
if (MathJax && MathJax.startup) {
MathJax.startup.getComponents();
MathJax.typeset();
}
};
refreshDialogMathjax(latex);
// add scripts for dialog iframe
for (let i = 0; i < mathjaxScripts.length; i++) {
let node = iframeWindow.document.createElement('script');
node.src = mathjaxScripts[i];
node.type = 'text/javascript';
node.async = false;
node.charset = 'utf-8';
iframeHead.appendChild(node);
}
};
});
function changesybol() {
if (document.getElementById("cb_br").checked) {
mathjaxSymbols = { start: '\\[', end: '\\] ' };
}
else {
mathjaxSymbols = { start: '\\(', end: '\\) ' };
}
}
这样，这个系统核心就完成了。
在线体验 http://demo.dotnetcms.org/math
浙公网安备 33010602011771号