使用MathJax获取MathML代码

时间:2015-08-28 19:34:43

标签: javascript mathjax

我已经构建了一个表单来编写LaTeX表达式并使用MathJax渲染它们。为了加速MathML代码的复制,我编写了一个脚本,在can see here中写了另一个textarea中的MathML代码。

这是我的代码:

<!doctype html>
<html>
<head>
<title>LaTeX para Word</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  showProcessingMessages: false,
  tex2jax: {
    inlineMath: [
      ['$','$'],
      [ '\\(', '\\)' ]
    ]
  },
  extensions: ['toMathML.js']
});

var math = null;
MathJax.Hub.queue.Push(function () {
  math = MathJax.Hub.getAllJax('MathOutput') [0];
});

window.UpdateMath = function (TeX) {
  MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + TeX + '}']);
  document.getElementById('output').value = '<?xml version="1.0"?>' + math.root.toMathML("");
};

function selectTextarea(element) {
  var text = document.getElementById(element).select();
}
</script>
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=pt-br"></script>
</head>
<body>

<textarea id="MathInput" cols="60" rows="10" onkeyup="UpdateMath(this.value)"></textarea>

<div id="MathOutput">
$${}$$
</div>
<hr>
<br>
<textarea id="output" cols="60" rows="10" readonly="readonly"></textarea>
<br>
<button onclick="selectTextarea('output')">Selecionar código</button>
<script src="main.js"></script>
</body>
</html>

问题是当我更快地键入公式时,MathML代码上不会显示最后一个字符。有时,我必须在公式的末尾添加一个空格,以便获得正确的MathML代码。任何人都可以给我一些提示来解决这个问题吗?

1 个答案:

答案 0 :(得分:3)

问题在于您将asynchronous次呼叫与synchronous次呼叫混合在一起。 Queue有效asynchronously,所以当你打电话给我时:

MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + TeX + '}']);

它不会等待实际渲染完成以转到下一行。所以这个调用在它完成之前执行:

document.getElementById('output').value = '<?xml version="1.0"?>' + math.root.toMathML("");

解决它的一种方法是对输出更新进行排队,你可以通过创建另一个处理输出的函数并在渲染之后对其进行排队来完成,因此只有在渲染完成时才会执行。像这样举例如:

window.updateMathMl = function (math) {
    document.getElementById('output').value = '<?xml version="1.0"?>' + math.root.toMathML("");
};

window.UpdateMath = function (TeX) {
    MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + TeX + '}'], [updateMathMl, math]);
};

https://jsfiddle.net/ew6vsqy8/1/