在文本区域内显示 MathML 符号答案

【问题标题】：Displaying MathML symbols inside a textarea在文本区域内显示 MathML 符号
【发布时间】：2012-09-17 09:47:19
【问题描述】：

我正在构建一个基本上是 HTML 文件中的数学文本编辑器。我的目标是允许用户在文本区域中显示数字和 MathML 符号，但完全不使用物理键盘。在页面的底部，我有一个由带有数字和算术符号的按钮组成的模拟键盘。当用户单击这些按钮时，相应的数字或符号将出现在文本区域内。到目前为止，我可以让它处理数字，但不能处理 MathML 符号。有没有办法让这些符号显示在文本区域内？

为了更容易理解，这里有一个由按钮之一调用的函数，用于将数字 1 插入文本区域：

function insertOne(mctextarea,oneText='1'){
    document.getElementById('mctextarea').value += oneText;
}

这是我尝试编写的将平方根符号插入文本区域的函数：

function insertSqrt(mctextarea,sqrt=<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mrow><msqrt>x</msqrt></mrow></math>){
    document.getElementById('mctextarea').value += sqrt;
}

...这显然不起作用，但我不知道从哪里开始尝试在 textarea 中显示 MathML。

请注意，我现在只使用 Javascript 大约 3 周，所以我仍在学习中。 :)

【问题讨论】：

标签： javascript textarea symbols mathml

【解决方案1】：

Ben，我是 stackoverflow.com 的新手，所以我无法发布这段代码呈现的图片。我正在使用开源 MathJax.js 在 HTML 中呈现数学函数。你可以在www.MathJax.org找到更好的例子。

PS：我仍在学习如何正确格式化答案；）
代码示例：

<!DOCTYPE html>
<html lang="en" >
  <head>
    <title></title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p>Have you seen MathJax.js at www.mathjax.org</p>
    <p>$$
      \large
      \begin{align&#42;}
      &amp; J(\theta) = \dfrac{1}{m} \sum&#95;{i=1}^m Cost((h&#95;
      \theta(x^{(i)}),y^{(i)}) \newline
      &amp; Cost((h&#95;\theta(x),y) = -log(h&#95;\theta(x)) \; &amp; \text{if y = 1}\newline
      &amp; Cost((h&#95;\theta(x),y) = -log(1-h&#95;\theta(x)) \; &amp; \text{if y = 0}\end{align&#42;}
      $$
    </p>

    <script type='text/javascript' src='http://cdn.mathjax.org/mathjax/late/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
  </body>
</html>

【讨论】：

您script 中的网址恐怕是404。你能帮我们复核一下吗？
啊，找到正确的网址：here
来自未来的注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 以获取迁移提示（也许为未来的读者更新您的帖子）。

【解决方案2】：

文本区域内的 html/xml 标记是不行的，请参阅 Rendering HTML inside textarea -- 它有一些您可以使用的其他方法的好主意。

此外，javascript 不允许像上面那样的默认参数，请参阅Set a default parameter value for a JavaScript function。您还需要将 xml 字符串放在单引号内。

您可能想要做的是让您的按钮将 MathJax 标记插入到文本区域中。然后，您将拥有另一个函数来获取此文本，并将其呈现在单独的 div 中。

所以你有一个可编辑的文本区域和一个显示结果的预览 div，很像 Stack Overflow 上的文本区域。

【讨论】：

好的，感谢您的反馈。我已将 textarea 改回 div（这是我之前的）并将 contenteditable="true" 放入 div 标记中。我将它作为文本区域的原因是我可以以某种方式创建一个退格按钮，但我还没有想出来。有没有办法为可编辑的 div 做这样的事情？
嗯...您可以保留放入 div 中的内容的堆栈（先进后出数组），用于呈现内容。每当有人点击退格按钮时，您就会将最新的项目从堆栈中弹出并重新渲染。