equation-editor-cah
Version:
Provides a modal dialog for editing math functions.
74 lines (61 loc) • 3.11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equation Editor - Browser</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/mathjs@10.0.0/lib/browser/math.js"></script>
<!--Uncomment the line below for old browsers-->
<!-- <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<script src="https://unpkg.com/equation-editor-cah@latest/js/editor.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/equation-editor-cah@latest/css/editor.min.css">
</head>
<body>
<div><button id="test">Test</button> <button id="test2">Test 2</button></div>
<div> AsciiMath Output (Test) : <input id="output" type="text" readOnly=true placeholder="Edited output - Test" />
</div>
<div> AsciiMath Output (Test 2) : <input id="output2" type="text" readOnly=true
placeholder="Edited output - Test 2" /></div>
<script>
//Create an equation editor that will be trigger when a clickable html element with id 'test' is clicked.
const ed = new EquationEditor("test");
const options = {
hideAlphas: true,
title: 'Function Editor',
screenColor: "#fff",
screenTextColor: "#00f",
prettyOnly: true,
initializeWithLastValue: true,
validOnly: true,
bigDialog: true,
degreeRadianMode: "degree",
//parenthesis: "keep",
//implicit: "show",
//simplifyOutput: true,
//operatorButtonTextColor: "red"
//buttonImages: {xSquareImg: "img/xSquare3.png"}
//buttonImages: { xSquareImg: "Sqr", squareRootImg: "Sqrt", xToPowYImg: "x^y" }
};
//Create a second equation editor that will be trigger when a clickable html element with id 'test2' is clicked.
new EquationEditor("test2", options);
//Note: Your app can create as many editorrs as necessary.
//Listen for when 'test' editor has something.
$(window).on("equationEdited", function (e, editedEquation, idOfTriggerElement) {
if (idOfTriggerElement == 'test') {
$("#output").val(editedEquation);
}
});
//Listen for when 'test2' editor has something.
$(window).on("equationEdited", function (e, editedEquation, idOfTriggerElement) {
if (idOfTriggerElement == 'test2') {
$("#output2").val(editedEquation);
}
});
</script>
</body>
</html>