代码之家 › 专栏 › 技术社区 › Ben

在文本区域内显示MathML符号

mathml symbols textarea javascript

Ben · 技术社区 · 12 年前

我正在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;
}

…这显然不起作用,但我不知道从哪里开始尝试在文本区域显示MathML。

请注意,我只使用Javascript大约3周了,所以我仍在学习诀窍。:)

2 回复 | 直到 12 年前

Jeremy J Starcher 12 年前

Ben,我是stackoverflow.com的新手,所以我不能发布这个代码所呈现的图片。我使用开源的MathJax.js在HTML中呈现数学函数。您可以在找到更好的示例 www.MathJax.org 。

附言:我仍在学习如何正确格式化答案;)
代码示例:

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

Community Egal 7 年前

文本区域内的html/xml标记是no,请参阅 Rendering HTML inside textarea --它为你可以使用的其他方法提供了一些好主意。

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

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

因此,您有一个可编辑的文本区域和一个显示结果的预览div,很像Stack Overflow上的文本区域。