前言
跟 MathJax、KaTex 不同，mathquill 是一个真正意义上的公式编辑器。
一边输入一边渲染，输出可以是 Tex，但是对于复杂的公式，这种输入方式还是有很大的局限性，输入过程还是需要记住一些 LaTex 命令（这里可以巧妙解决）。
简单的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./mathquill-0.10.1/mathquill.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="mathquill-0.10.1/mathquill.js"></script>
<title>Document</title>
</head>
<body>
<span class="math-field">
\sqrt{ \MathQuillMathField{x}^2 + \MathQuillMathField{y}^2 }
</span>
<script>
// 这里MathQuill使用标准2（最新）
const MQV2 = MathQuill.getInterface(2);
// 静态方法：根据页面元素内容渲染一个可以编辑的公式 并返回一个MathField实例对象.
const mathField = MQV2.MathField(document.querySelector(".math-field"), {
handlers: {
// 监听公式修改
edit: function () {
console.log(mathField.latex());
},
},
});
// 获取渲染的公式内容
console.log(mathField.latex());
// mathField.latex可以获取LaTeX也可也将LaTeX转换为mathField（即公式显示）
setTimeout(()=>{
// 3s后，公式将变为如下
mathField.latex("2^{\\frac{3}{2}}");
}, 3000)
</script>
</body>
</html>
