latex - 具有 MathJax 或类似功能的虚拟 Latex 数学键盘

Question

我正在尝试创建一个虚拟数学键盘，就像 khanacademy.org 或 mathspace.co 或类似网站中的那个，如果您是学生，您可以在其中插入数学符号并在上面写下回答问题，我该如何实现类似的东西？在 khanacademy.org 他们使用的是 MathJax，我试图通读文档但没有运气。

Answer 1

MathQuill似乎可以帮助您实现所需的目标。默认情况下它不显示键盘，尽管它具有所有必需的输入功能。下面是他们在主页上的演示代码，在代码片段中运行良好。您可能希望使用MathQuill 文档中的选项进行配置。

键盘是单独的控件，实现起来非常简单，例如使用下面的引导程序。键盘正在使用 .cmd(str) 向 MathQuill 字段提供输入命令（不要忘记返回焦点 .focus()） - 请参阅函数input()。请注意，要使用引导程序，您需要按照引导程序站点上的说明包含 bootstrap.css ：

var mathFieldSpan = document.getElementById('math-field');
var MQ = MathQuill.getInterface(2);
var mathField = MQ.MathField(mathFieldSpan, {
  spaceBehavesLikeTab: true,
  handlers: {
    edit: function() {
      mathField.focus()
    }
  }
});

function input(str) {
  mathField.cmd(str)
  mathField.focus()
}

<link rel="stylesheet" href="http://mathquill.com/lib/mathquill.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://mathquill.com/lib/mathquill.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<p>Type math here: <span id="math-field"></span>
</p>
<div id="keyboard">
  <div class="btn-group" role="group" aria-label="math functions">
    <button type="button" class="btn btn-default" onClick='input("\\sqrt")'>√&lt;/button>
    <button type="button" class="btn btn-default" onClick= 'input("\\sin")'>sin</button>
    <button type="button" class="btn btn-default" onClick='input("\\cos")'>cos</button>
    <button type="button" class="btn btn-default" onClick='input("\\tan")'>tan</button>
  </div>
</div>