MathJax 또는 이와 유사한 가상 라텍스 수학 키보드

Question

khanacademy.org 또는 mathspace.co 또는 이와 유사한 웹 사이트의 가상 수학 키보드를 만들려고합니다. 수학 기호를 삽입하고 질문에 답할 수 있습니다. 당신이 학생이라면, 어떻게 그런 것을 얻을 수 있습니까? khanacademy.org에서 그들은 MathJax를 사용하고 있으며, 운이없는 설명서를 읽으려고했습니다.

Answer 1

이 MathQuill는 당신이 필요 달성하기 위해 당신을 도움이 될 것 같다. 모든 필수 입력 기능을 가지고 있지만 기본적으로 키보드를 표시하지 않습니다. 아래는 홈 페이지의 데모 코드입니다. 스 니펫에서 잘 작동합니다. MathQuill docs의 옵션을 사용하여 구성 할 수 있습니다.

키보드는 구현하기가 아주 쉬운 별도의 컨트롤입니다 (예 : 아래의 부트 스트랩 사용). 키보드가 .cmd (str)을 사용하여 MathQuill 필드에 입력 명령을 제공합니다 (초점을 .focus()로 되 돌리는 것을 잊지 말것) - 함수 입력()을 참조하십시오. bootstrap site에 설명 된대로 bootstrap.css을 포함해야합니다 부트 스트랩을 사용하여, 참고 : 당신이 말할 때, "나는 행운을 가진 문서를 읽으려고"

var mathFieldSpan = document.getElementById('math-field'); 
 
var MQ = MathQuill.getInterface(2); 
 
var mathField = MQ.MathField(mathFieldSpan, { 
 
    spaceBehavesLikeTab: true, 
 
    handlers: { 
 
    edit: function() { 
 
     mathField.focus() 
 
    } 
 
    } 
 
}); 
 

 
function input(str) { 
 
    mathField.cmd(str) 
 
    mathField.focus() 
 
}

<link rel="stylesheet" href="http://mathquill.com/lib/mathquill.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="http://mathquill.com/lib/mathquill.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 
 

 
<p>Type math here: <span id="math-field"></span> 
 
</p> 
 
<div id="keyboard"> 
 
    <div class="btn-group" role="group" aria-label="math functions"> 
 
    <button type="button" class="btn btn-default" onClick='input("\\sqrt")'>√</button> 
 
    <button type="button" class="btn btn-default" onClick= 'input("\\sin")'>sin</button> 
 
    <button type="button" class="btn btn-default" onClick='input("\\cos")'>cos</button> 
 
    <button type="button" class="btn btn-default" onClick='input("\\tan")'>tan</button> 
 
    </div> 
 
</div>