使用 html css 的方程编辑器

Question

我想让用户输入简单的方程，如单词或谷歌文档。 例如。当用户输入 y = 2/ 应该会自动将 2/ 替换为分数，并将光标移至分母。

我知道如何使用 Latex、mathjax、mathml。但它们只在单独的字段中变换方程。他们不允许实时光标像 Word 或 doc 中的方程式编辑器一样进行编辑。

我希望光标能够移动到实时方程中的位置。 (https://i.sstatic.net/YupaNCx7.jpg)(https://i.sstatic.net/bm6rXrsU.jpg) （https://i.sstatic.net/FZ9pvxVo.jpg）

Answer 1

有一个名为 MathQuill 的库，它会让事情变得更容易。 下载并将其链接到您的 html 后，您可以使用：

<p>Type math here: <span id="math-field"></span></p>
<p>LaTeX of what you typed: <span id="latex"></span></p>

<script>
var mathFieldSpan = document.getElementById('math-field');
var latexSpan = document.getElementById('latex');

var MQ = MathQuill.getInterface(2); // for backcompat
var mathField = MQ.MathField(mathFieldSpan, {
  spaceBehavesLikeTab: true, // configurable
  handlers: {
    edit: function() { // useful event handlers
      latexSpan.textContent = mathField.latex(); // simple API
    }
  }
});
</script>

另一种方法是使用 MathJax