Question

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

为了使这更容易理解，这是一个由一个按钮调用的函数，用于将数字1插入到textarea中：

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

这是我尝试写的一个函数，用于在textarea中插入一个平方根符号：

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周，所以我还在学习绳索。：）

Answer 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>

Answer 2

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

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

您可能想要做的是让您的按钮将MathJax标记插入到textarea中。然后你将有另一个功能来抓取这个文本，并将它呈现在一个单独的div中。

所以你有可编辑的textarea，以及一个显示结果的预览div，就像Stack Overflow上的textareas一样。

在textarea中显示MathML符号

2 个答案: