반응형
[JavaScript & jQuery] 자바스크립트를 활용하여 수학 수식 편집기 만드는 방법 !!
mathquill에서 제공해주는 라이브러리를 활용하여 수식을 입력하면 수학값을 보여주는 수식편집기를 만들어보았습니다.
출처. MathQuill: Easily type math into your webapp
MathQuill: Easily type math into your webapp
Type math here: LaTeX of what you typed: MathQuill is an open source formula editor for the Web maintained by @laughinghan and @stufflebear. MathQuill was born of a need to communicate math. The creators, @laughinghan and @jneen, used LaTeX for projects to
mathquill.com
예제코드
<!DOCTYPE html>
<html>
<head>
<title>MathQuill Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js"></script>
</head>
<body>
<div id="mathquill-input" style="width:300px;"></div>
<button id="submit-btn">Submit</button>
<div id="output"></div>
</body>
</html>
<script>
$(document).ready(function() {
var MQ = MathQuill.getInterface(2); // MathQuill 인터페이스 가져오기
var mathField = MQ.MathField($('#mathquill-input')[0], { // 입력 상자 생성
spaceBehavesLikeTab: true,
handlers: {
edit: function() {
updateOutput(mathField.latex()); // 입력 상자의 내용이 변경될 때마다 출력 업데이트
}
}
});
function updateOutput(latex) { // 출력 업데이트 함수
$('#output').html('입력값: ' + latex);
}
$('#submit-btn').click(function() { // 제출 버튼 클릭 핸들러
var latex = mathField.latex(); // 입력 상자의 LaTeX 내용 가져오기
alert('You entered: ' + latex);
});
});
</script>결과값
입력예시
(a^2 + ab + b^2 )(a^2 - ab + b^2 )
(x^3+x^2-2x+3)
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript & jQuery] html에서 이미지 변경 시 사라졌다 나타나는 효과(fadeIn & fadeOut) (0) | 2023.06.08 |
|---|---|
| [JavaScript] 자바스크립트로 로또 번호 추첨기 만드는 방법 !! (0) | 2023.05.17 |
| [JavaScript] 자바스크립트로 .ini 파일 읽기 & 불러오기 방법 !! (0) | 2023.05.09 |
| [JavaScript & jQuery] 제이쿼리를 사용하여 img 태그 src 변경하는 방법 !! (0) | 2023.05.08 |
| [JavaScript & jQuery] 제이쿼리로 input 텍스트 변경 시점 감지 및 찾는 방법 !! (2) | 2023.05.03 |
댓글