2

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

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

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 周，所以我仍在学习绳索。:)

4

2 回答 2

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>
于 2012-09-25T21:10:19.840 回答
0

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

此外，javascript 不允许像上面那样的默认参数，请参阅为 JavaScript 函数设置默认参数值。您还需要将 xml 字符串放在单引号内。

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

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

于 2012-09-25T20:20:37.017 回答