在文本区域内显示MathML符号

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

为了使这更容易理解，这里有一个通过一个按钮叫插入数字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周，所以我仍然在学习绳索。 :)

来源

2012-09-25 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-25 21:10:19 user1698413

你的脚本中的URL是'404'恐怕。你能仔细检查我们吗？ –

啊，找到了正确的网址：[here]（http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMMLhttp://cdn.mathjax.org/mathjax/latest/ MathJax.js？config = TeX-AMS-MML_HTMLorMML） –

未来的注意事项：cdn.mathjax.org即将报废，请查看https://www.mathjax.org/cdn-shutting-down进行移植提示（也许更新您的文章为未来的读者）。 –

在文本区域内的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一样。

来源

2012-09-25 20:20:37

好了，感谢您的反馈意见。我已经把textarea改回到div（这是我以前的版本），并将contenteditable =“true”放入div标签中。我将它作为textarea的原因是，我可以创建一个退格按钮，但我还没有弄清楚。有没有办法为可编辑的div做这样的事情？ – Ben

嗯......你可以保留一个堆栈（先入先出阵列）放入div的东西，你用它来渲染内容。每当有人点击退格按钮时，您将最新的项目从堆栈弹出并重新渲染。 –

在文本区域内显示MathML符号

回答

相关问题