使用MathJax或类似工具的虚拟LaTeX数学键盘

Question

我正在尝试创建一个虚拟的数学键盘，就像khanacademy.org或者mathspace.co等类似网站上的那个，你可以插入数学符号并覆盖它们来回答问题，如果你是一名学生，那么我该如何实现这样的功能？

在khanacademy.org上，他们使用MathJax，我尝试阅读文档，但没有成功。

- Ruby

---

当你说“我尝试阅读文档但没有成功”时，是指你不理解文档还是文档中的某些示例代码对你无效？我很难理解你的问题具体是什么？你不理解MathJax还是在问我们如何创建键盘？你能展示一些你尝试过但对你无效的代码吗？ - quarterpi

我在文档中找不到有关如何做到这一点的具体信息，但我试图寻找除MathJax之外的其他选项。 我正在尝试找到有关如何完成此操作的有用代码参考，不一定要使用MathJax。 - Ruby

好的，可能这不完全是你要找的，但我想分享一下，希望能帮助你实现项目并给你一些灵感。第一个链接是数学键盘，第二个链接是计算器。两者都可以在GitHub上找到。键盘，计算器 - quarterpi

是的，这是一个冒险。祝一切顺利。 - quarterpi

@mickliddy，是的，非常有用，谢谢 :) - Ruby

Answer 1

似乎MathQuill可以帮助你实现所需的功能。尽管默认情况下它不显示键盘，但它具有所有所需的输入功能。以下是他们首页上的演示代码，在片段中运行良好。您可能想通过MathQuill文档中的选项进行配置。

键盘是一个单独的控件，使用下面的bootstrap实现相当简单。键盘将输入命令传输到MathQuill字段中的.cmd（str）（要记得返回焦点.focus（））-请参见函数input()。请注意，要使用bootstrap，您需要按照bootstrap网站上描述的方式包含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")'>√</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>

- Max Vorobjev

---

非常感谢您的分享，@MaxVorobjev。这正是我一直在寻找的。不过，我对React并不熟悉，是否有一种方法可以不使用React或Angular，只使用纯JS和jQuery来实现呢？ - Ruby

使用jQuery，您可以使用https://mottie.github.io/Keyboard/，这是一个非常可配置的键盘，查看键盘示例，您可以保持输入功能不变，只需将其绑定到jQuery键盘的onClick事件即可。 - Max Vorobjev

实际上比那个更简单，你只需使用Bootstrap CSS即可实现占用更少空间的美观键盘。已编辑回答，请查看，现在仅使用Bootstrap、 jQuery和Mathquill。 - Max Vorobjev

哇，这正是我一直在寻找的，我为了这个答案搜索了很长时间。谢谢你啊。 - Ruby