带有MathJax或类似

Question

我试图创建一个像khanacademy.org或mathspace.co或类似网站中的虚拟数学键盘，在那里你可以插入数学符号并写下来回答问题，如果你是一个学生，我怎么能做到这样的？ 在khanacademy.org，他们正在使用MathJax，我试着阅读文档而没有运气。

Answer 1

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

键盘是单独的控件，实现起来非常简单，例如使用下面的bootstrap。键盘使用.cmd（str）向MathQuill字段输入输入命令（不要忘记返回焦点.focus（）） - 请参阅函数 input（）。注意，要使用bootstrap，您需要包含bootstrap.css，如bootstrap site所述：

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>