2

私は基本的に HTML ファイルで数学テキスト エディターを構築しています。私の目標は、ユーザーが数字と MathML 記号をテキストエリアに表示できるようにすることですが、物理的なキーボードを完全に使用する必要はありません。ページの下部には、数字と算術記号の付いたボタンで構成された模擬キーボードがあります。ユーザーがこれらのボタンをクリックすると、対応する数字または記号がテキストエリア内に表示されます。これまでのところ、これを数値で動作させることはできますが、MathML 記号では動作しません。これらのシンボルをテキストエリア内に表示する方法はありますか?

これを理解しやすくするために、数字の 1 をテキストエリアに挿入するためにボタンの 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 週間ほどしか経っていないので、まだコツを学んでいるところです。:)

4

2 に答える 2

1

ベン、私は stackoverflow.com を初めて使用するので、このコードがレンダリングする画像を投稿できません。HTMLで数学関数をレンダリングするために、オープンソースのMathJax.jsを使用しています。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 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.

于 2012-09-25T20:20:37.017 に答える