텍스트 영역 내에 MathML 기호 표시

기본적으로 HTML 파일의 수학 텍스트 편집기입니다. 나의 목표는 사용자가 숫자와 MathML 기호를 텍스트 영역에 표시 할 수 있지만 물리적 키보드는 전혀 사용하지 않는 것입니다. 페이지 하단에는 숫자와 산술 기호가있는 단추로 구성된 모의 키보드가 있습니다. 사용자가이 버튼을 클릭하면 해당 숫자 나 기호가 텍스트 영역 안에 나타납니다. 지금까지,이 작업을 숫자로 할 수는 있지만 MathML 기호로는 할 수 없습니다. 이 기호를 텍스트 영역에 표시 할 수있는 방법이 있습니까? 나는에 제곱근 기호를 삽입 작성 시도하는 기능은 여기텍스트 영역 내에 MathML 기호 표시

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

그리고 것 :

이해하기이 쉽게하려면, 여기에 텍스트 영역에 숫자 1을 삽입 버튼 중 하나를 호출하는 기능입니다 텍스트 영역은 :

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을 표시하려고 시작 위치를 알 수 없습니다.

약 3 주 동안 Javascript 만 사용 했으므로 아직 밧줄을 배우고 있습니다. :)

출처

2012-09-25 Ben

벤, 나는이 코드 렌더링의 그림을 게시 할 수 없어 매우 stackoverflow.com에 새입니다. 나는 opensource 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'입니다. 두려워요. 우리를 위해 그것을 다시 확인할 수 있습니까? –

아, 올바른 URL을 찾았습니다 : [여기] (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는 위에 나온 것과 같은 기본 args를 허용하지 않습니다. Set a default parameter value for a JavaScript function을 참조하십시오. xml 문자열을 작은 따옴표로 묶어야합니다.

아마 버튼에서 텍스트 영역에 MathJax 마크 업을 삽입해야 할 것입니다. 그런 다음이 텍스트를 잡고 별도의 div에 렌더링하는 또 다른 기능을 제공합니다.

그래서 편집 가능한 텍스트 영역과 결과를 보여주는 미리보기 div가 있습니다. 스택 오버플로의 텍스트 영역과 매우 비슷합니다.

출처

2012-09-25 20:20:37

, 감사합니다. textarea를 div (이전에 가지고있는 내용)로 변경하고 contenteditable = "true"를 div 태그에 넣었습니다. 내가 텍스트 영역으로 사용하게 된 이유는 백 스페이스 버튼을 어떻게 든 만들 수 있었기 때문입니다. 편집 가능한 div에 대해 그런 일을 할 수있는 방법이 있습니까? – Ben

흠 ... 당신은 당신이 내용을 렌더링하는 데 사용하는 div에 넣은 것들의 스택 (first-in-last-out 배열)을 유지할 수 있습니다. 누군가가 백 스페이스 버튼을 누를 때마다 스택에서 가장 최근의 아이템을 뽑아 내고 다시 렌더링합니다. –

텍스트 영역 내에 MathML 기호 표시

답변

관련 문제