Displaying MathML symbols inside a textarea

Question

I'm building what is basically a mathematic text editor in an HTML file. My goal is to allow the user to display numbers and MathML symbols in a textarea, but completely without the use of a physical keyboard. On the bottom of the page I have a mock keyboard made of buttons with numbers and arithmetic symbols. When the user clicks these buttons, the corresponding number or symbol will then appear inside the textarea. So far, I can get this to work with numbers, but not the MathML symbols. Is there any way to get these symbols to show up inside the textarea?

To make this easier to understand, here's a function called by one of the buttons to insert the number 1 into the textarea:

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

And here's a function I tried writing to insert a square root sign into the 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;
}

...which obviously doesn't work, but I don't know where to begin trying to display MathML in the textarea.

Be aware that I've only been using Javascript for about 3 weeks now, so I'm still learning the ropes. :)

score 1 · Accepted Answer · edited Sep 25 '12 at 21:29

1

Ben, I am very new to stackoverflow.com so I can not post a picture of what this code renders. I am using opensource MathJax.js to render mathematical function in HTML. You can find better examples at www.MathJax.org.

PS: I am still learning how to format answers correctly ;)
Code Example:

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

edited Sep 25 '12 at 21:29

Jeremy J Starcher

21,760
5
48
70

answered Sep 25 '12 at 21:10

user1698413

26
1

the URL in your `script` is `404` I'm afraid. Can you double-check that for us? – Jeremy J Starcher Sep 25 '12 at 21:31
1

Ah, found the right URL: [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) – Jeremy J Starcher Sep 25 '12 at 21:36
Note from the future: cdn.mathjax.org is nearing its end-of-life, check https://www.mathjax.org/cdn-shutting-down for migration tips (and perhaps update your post for future readers). – Peter Krautzberger Apr 21 '17 at 07:45

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

html/xml tags inside a text area is a no no, see Rendering HTML inside textarea --it's got some good ideas for other methods you could use.

Also, javascript doesn't allow default args like the ones you have above, see Set a default parameter value for a JavaScript function. You'll need to put your xml string inside single quotes as well.

Probably what you'll want to do is have your buttons insert MathJax markup into the textarea. Then you'll have another function that grabs this text, and renders it in a separate div.

So you have the editable textarea, and a preview div that shows the results, much like the textareas on Stack Overflow.

edited May 23 '17 at 12:04

Community

1
1

answered Sep 25 '12 at 20:20

Brian Duncan

1,128
1
13
21

Alright, thanks for the feedback. I've changed the textarea back to a div (which is what I had before) and put contenteditable="true" into the div tag. The reason I had it as a textarea was so that I could somehow create a backspace button, which I hadn't figured out yet. Is there a way to do such a thing for an editable div? – Ben Sep 25 '12 at 23:20
Hmm... you could keep a stack (first-in-last-out array) of things you put into the div, which you use to render the content. Whenever someone hits the backspace button, you pop the latest item off the stack and re-render. – Brian Duncan Sep 26 '12 at 19:07

Displaying MathML symbols inside a textarea

2 Answers2

Linked