Equation Editor
Standalone Simple Example
Source Code
This example includes the addition of two custom buttons to the toolbar.
<head>
<script src="https://editor.codecogs.com/eqneditor.api.min.js"></script>
</head>
<body>
<div id="equation-editor">
<div id="history"></div>
<div id="toolbar"></div>
<div id="latexInput"></div>
<div id="equation-output">
<img id="output"/>
</div>
</div>
<!-- Main scripts to setup and control export features of Editor -->
<script>
document.addEventListener('DOMContentLoaded', function(){
textarea = EqEditor.TextArea.link('latexInput', true)
.addOutput(EqEditor.Output.link('output').
setRenderURL('https://latex.codecogs.com') )
.addHistoryMenu(new EqEditor.History('history'));
EqEditor.Toolbar.link('toolbar')
.addTextArea(textarea)
.appendPanel(0,{
"name":"siunitx",
"class":"green",
"width":50,
"buttons":[
{
"latex": "\\mp",
"base64": "PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0nVVRGLTgnPz4KPCEtLSBHZW5lcmF0ZWQgYnkgQ29kZUNvZ3Mgd2l0aCBkdmlzdmdtIDMuMC4zIC0tPgo8c3ZnIHZlcnNpb249JzEuMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycgd2lkdGg9JzMzLjk0MjczMnB0JyBoZWlnaHQ9JzExLjg1MDcyN3B0JyB2aWV3Qm94PSctLjIzOTA1MSAtLjIzNTI1NCAzMy45NDI3MzIgMTEuODUwNzI3Jz4KPGRlZnM+CjxwYXRoIGlkPSdnMS01MCcgZD0nTTIuMjQ3NTcyLTEuNjI1OTAzQzIuMzc1MDkzLTEuNzQ1NDU1IDIuNzA5ODM4LTIuMDA4NDY4IDIuODM3MzYtMi4xMjAwNUMzLjMzMTUwNy0yLjU3NDM0NiAzLjgwMTc0My0zLjAxMjcwMiAzLjgwMTc0My0zLjczNzk4M0MzLjgwMTc0My00LjY4NjQyNiAzLjAwNDczMi01LjMwMDEyNSAyLjAwODQ2OC01LjMwMDEyNUMxLjA1MjA1NS01LjMwMDEyNSAuNDIyNDE2LTQuNTc0ODQ0IC40MjI0MTYtMy44NjU1MDRDLjQyMjQxNi0zLjQ3NDk2OSAuNzMzMjUtMy40MTkxNzggLjg0NDgzMi0zLjQxOTE3OEMxLjAxMjIwNC0zLjQxOTE3OCAxLjI1OTI3OC0zLjUzODczIDEuMjU5Mjc4LTMuODQxNTk0QzEuMjU5Mjc4LTQuMjU2MDQgLjg2MDc3Mi00LjI1NjA0IC43NjUxMzEtNC4yNTYwNEMuOTk2MjY0LTQuODM3ODU4IDEuNTMwMjYyLTUuMDM3MTExIDEuOTIwNzk3LTUuMDM3MTExQzIuNjYyMDE3LTUuMDM3MTExIDMuMDQ0NTgzLTQuNDA3NDcyIDMuMDQ0NTgzLTMuNzM3OTgzQzMuMDQ0NTgzLTIuOTA5MDkxIDIuNDYyNzY1LTIuMzAzMzYyIDEuNTIyMjkxLTEuMzM4OTc5TC41MTgwNTctLjMwMjg2NEMuNDIyNDE2LS4yMTUxOTMgLjQyMjQxNi0uMTk5MjUzIC40MjI0MTYgMEgzLjU3MDYxTDMuODAxNzQzLTEuNDI2NjVIMy41NTQ2N0MzLjUzMDc2LTEuMjY3MjQ4IDMuNDY2OTk5LS44Njg3NDIgMy4zNzEzNTctLjcxNzMxQzMuMzIzNTM3LS42NTM1NDkgMi43MTc4MDgtLjY1MzU0OSAyLjU5MDI4Ni0uNjUzNTQ5SDEuMTcxNjA2TDIuMjQ3NTcyLTEuNjI1OTAzWicvPgo8cGF0aCBpZD0nZzAtNTgnIGQ9J00yLjE5OTc1MS0uNTczODQ4QzIuMTk5NzUxLS45MjA1NDggMS45MTI4MjctMS4xNTk2NTEgMS42MjU5MDMtMS4xNTk2NTFDMS4yNzkyMDMtMS4xNTk2NTEgMS4wNDAxLS44NzI3MjcgMS4wNDAxLS41ODU4MDNDMS4wNDAxLS4yMzkxMDMgMS4zMjcwMjQgMCAxLjYxMzk0OCAwQzEuOTYwNjQ4IDAgMi4xOTk3NTEtLjI4NjkyNCAyLjE5OTc1MS0uNTczODQ4WicvPgo8cGF0aCBpZD0nZzAtMTAxJyBkPSdNMi4xMzk5NzUtMi43NzM1OTlDMi40NjI3NjUtMi43NzM1OTkgMy4yNzU3MTYtMi43OTc1MDkgMy44NDk1NjQtMy4wMTI3MDJDNC43NTgxNTctMy4zNTk0MDIgNC44NDE4NDMtNC4wNTI4MDIgNC44NDE4NDMtNC4yNjc5OTVDNC44NDE4NDMtNC43OTQwMjIgNC4zODc1NDctNS4yNzIyMjkgMy41OTg1MDYtNS4yNzIyMjlDMi4zNDMyMTMtNS4yNzIyMjkgLjUzNzk4My00LjEzNjQ4OCAuNTM3OTgzLTIuMDA4NDY4Qy41Mzc5ODMtLjc1MzE3NiAxLjI1NTI5MyAuMTE5NTUyIDIuMzQzMjEzIC4xMTk1NTJDMy45NjkxMTYgLjExOTU1MiA0Ljk5NzI2LTEuMTQ3Njk2IDQuOTk3MjYtMS4zMDMxMTNDNC45OTcyNi0xLjM3NDg0NCA0LjkyNTUyOS0xLjQzNDYyIDQuODc3NzA5LTEuNDM0NjJDNC44NDE4NDMtMS40MzQ2MiA0LjgyOTg4OC0xLjQyMjY2NSA0LjcyMjI5MS0xLjMxNTA2OEMzLjk1NzE2MS0uMjk4ODc5IDIuODIxNDItLjExOTU1MiAyLjM2NzEyMy0uMTE5NTUyQzEuNjg1Njc5LS4xMTk1NTIgMS4zMjcwMjQtLjY1NzUzNCAxLjMyNzAyNC0xLjU0MjIxN0MxLjMyNzAyNC0xLjcwOTU4OSAxLjMyNzAyNC0yLjAwODQ2OCAxLjUwNjM1MS0yLjc3MzU5OUgyLjEzOTk3NVpNMS41NjYxMjctMy4wMTI3MDJDMi4wODAxOTktNC44NTM3OTggMy4yMTU5NC01LjAzMzEyNiAzLjU5ODUwNi01LjAzMzEyNkM0LjEyNDUzMy01LjAzMzEyNiA0LjQ4MzE4OC00LjcyMjI5MSA0LjQ4MzE4OC00LjI2Nzk5NUM0LjQ4MzE4OC0zLjAxMjcwMiAyLjU3MDM2MS0zLjAxMjcwMiAyLjA2ODI0NC0zLjAxMjcwMkgxLjU2NjEyN1onLz4KPHBhdGggaWQ9J2cyLTQ4JyBkPSdNNS4zNTU5MTUtMy44MjU2NTRDNS4zNTU5MTUtNC44MTc5MzMgNS4yOTYxMzktNS43ODYzMDEgNC44NjU3NTMtNi42OTQ4OTRDNC4zNzU1OTItNy42ODcxNzMgMy41MTQ4MTktNy45NTAxODcgMi45MjkwMTYtNy45NTAxODdDMi4yMzU2MTYtNy45NTAxODcgMS4zODY4LTcuNjAzNDg3IC45NDQ0NTgtNi42MTEyMDhDLjYwOTcxNC01Ljg1ODAzMiAuNDkwMTYyLTUuMTE2ODEyIC40OTAxNjItMy44MjU2NTRDLjQ5MDE2Mi0yLjY2NjAwMiAuNTczODQ4LTEuNzkzMjc1IDEuMDA0MjM0LS45NDQ0NThDMS40NzA0ODYtLjAzNTg2NiAyLjI5NTM5MiAuMjUxMDU5IDIuOTE3MDYxIC4yNTEwNTlDMy45NTcxNjEgLjI1MTA1OSA0LjU1NDkxOS0uMzcwNjEgNC45MDE2MTktMS4wNjQwMUM1LjMzMjAwNS0xLjk2MDY0OCA1LjM1NTkxNS0zLjEzMjI1NCA1LjM1NTkxNS0zLjgyNTY1NFpNMi45MTcwNjEgLjAxMTk1NUMyLjUzNDQ5NiAuMDExOTU1IDEuNzU3NDEtLjIwMzIzOCAxLjUzMDI2Mi0xLjUwNjM1MUMxLjM5ODc1NS0yLjIyMzY2MSAxLjM5ODc1NS0zLjEzMjI1NCAxLjM5ODc1NS0zLjk2OTExNkMxLjM5ODc1NS00Ljk0OTQ0IDEuMzk4NzU1LTUuODM0MTIyIDEuNTkwMDM3LTYuNTM5NDc3QzEuNzkzMjc1LTcuMzQwNDczIDIuNDAyOTg5LTcuNzExMDgzIDIuOTE3MDYxLTcuNzExMDgzQzMuMzcxMzU3LTcuNzExMDgzIDQuMDY0NzU3LTcuNDM2MTE1IDQuMjkxOTA1LTYuNDA3OTdDNC40NDczMjMtNS43MjY1MjYgNC40NDczMjMtNC43ODIwNjcgNC40NDczMjMtMy45NjkxMTZDNC40NDczMjMtMy4xNjgxMiA0LjQ0NzMyMy0yLjI1OTUyNyA0LjMxNTgxNi0xLjUzMDI2MkM0LjA4ODY2Ny0uMjE1MTkzIDMuMzM1NDkyIC4wMTE5NTUgMi45MTcwNjEgLjAxMTk1NVonLz4KPHBhdGggaWQ9J2cyLTQ5JyBkPSdNMy40NDMwODgtNy42NjMyNjNDMy40NDMwODgtNy45MzgyMzIgMy40NDMwODgtNy45NTAxODcgMy4yMDM5ODUtNy45NTAxODdDMi45MTcwNjEtNy42MjczOTcgMi4zMTkzMDMtNy4xODUwNTYgMS4wODc5Mi03LjE4NTA1NlYtNi44MzgzNTZDMS4zNjI4ODktNi44MzgzNTYgMS45NjA2NDgtNi44MzgzNTYgMi42MTgxODItNy4xNDkxOTFWLS45MjA1NDhDMi42MTgxODItLjQ5MDE2MiAyLjU4MjMxNi0uMzQ2NyAxLjUzMDI2Mi0uMzQ2N0gxLjE1OTY1MVYwQzEuNDgyNDQxLS4wMjM5MSAyLjY0MjA5Mi0uMDIzOTEgMy4wMzY2MTMtLjAyMzkxUzQuNTc4ODI5LS4wMjM5MSA0LjkwMTYxOSAwVi0uMzQ2N0g0LjUzMTAwOUMzLjQ3ODk1NC0uMzQ2NyAzLjQ0MzA4OC0uNDkwMTYyIDMuNDQzMDg4LS45MjA1NDhWLTcuNjYzMjYzWicvPgo8cGF0aCBpZD0nZzItNTEnIGQ9J00yLjE5OTc1MS00LjI5MTkwNUMxLjk5NjUxMy00LjI3OTk1IDEuOTQ4NjkyLTQuMjY3OTk1IDEuOTQ4NjkyLTQuMTYwMzk5QzEuOTQ4NjkyLTQuMDQwODQ3IDIuMDA4NDY4LTQuMDQwODQ3IDIuMjIzNjYxLTQuMDQwODQ3SDIuNzczNTk5QzMuNzg5Nzg4LTQuMDQwODQ3IDQuMjQ0MDg1LTMuMjAzOTg1IDQuMjQ0MDg1LTIuMDU2Mjg5QzQuMjQ0MDg1LS40OTAxNjIgMy40MzExMzMtLjA3MTczMSAyLjg0NTMzLS4wNzE3MzFDMi4yNzE0ODItLjA3MTczMSAxLjI5MTE1OC0uMzQ2NyAuOTQ0NDU4LTEuMTM1NzQxQzEuMzI3MDI0LTEuMDc1OTY1IDEuNjczNzI0LTEuMjkxMTU4IDEuNjczNzI0LTEuNzIxNTQ0QzEuNjczNzI0LTIuMDY4MjQ0IDEuNDIyNjY1LTIuMzA3MzQ3IDEuMDg3OTItMi4zMDczNDdDLjgwMDk5Ni0yLjMwNzM0NyAuNDkwMTYyLTIuMTM5OTc1IC40OTAxNjItMS42ODU2NzlDLjQ5MDE2Mi0uNjIxNjY5IDEuNTU0MTcyIC4yNTEwNTkgMi44ODExOTYgLjI1MTA1OUM0LjMwMzg2MSAuMjUxMDU5IDUuMzU1OTE1LS44MzY4NjIgNS4zNTU5MTUtMi4wNDQzMzRDNS4zNTU5MTUtMy4xNDQyMDkgNC40NzEyMzMtNC4wMDQ5ODEgMy4zMjM1MzctNC4yMDgyMTlDNC4zNjM2MzYtNC41MDcwOTggNS4wMzMxMjYtNS4zNzk4MjYgNS4wMzMxMjYtNi4zMTIzMjlDNS4wMzMxMjYtNy4yNTY3ODcgNC4wNTI4MDItNy45NTAxODcgMi44OTMxNTEtNy45NTAxODdDMS42OTc2MzQtNy45NTAxODcgLjgxMjk1MS03LjIyMDkyMiAuODEyOTUxLTYuMzQ4MTk0Qy44MTI5NTEtNS44Njk5ODggMS4xODM1NjItNS43NzQzNDYgMS4zNjI4ODktNS43NzQzNDZDMS42MTM5NDgtNS43NzQzNDYgMS45MDA4NzItNS45NTM2NzQgMS45MDA4NzItNi4zMTIzMjlDMS45MDA4NzItNi42OTQ4OTQgMS42MTM5NDgtNi44NjIyNjcgMS4zNTA5MzQtNi44NjIyNjdDMS4yNzkyMDMtNi44NjIyNjcgMS4yNTUyOTMtNi44NjIyNjcgMS4yMTk0MjctNi44NTAzMTFDMS42NzM3MjQtNy42NjMyNjMgMi43OTc1MDktNy42NjMyNjMgMi44NTcyODUtNy42NjMyNjNDMy4yNTE4MDYtNy42NjMyNjMgNC4wMjg4OTItNy40ODM5MzUgNC4wMjg4OTItNi4zMTIzMjlDNC4wMjg4OTItNi4wODUxODEgMy45OTMwMjYtNS40MTU2OTEgMy42NDYzMjYtNC45MDE2MTlDMy4yODc2NzEtNC4zNzU1OTIgMi44ODExOTYtNC4zMzk3MjYgMi41NTg0MDYtNC4zMjc3NzFMMi4xOTk3NTEtNC4yOTE5MDVaJy8+CjwvZGVmcz4KPGcgaWQ9J3BhZ2UxJyB0cmFuc2Zvcm09J21hdHJpeCgxLjEzIDAgMCAxLjEzIC02My45ODYwNDMgLTYyLjk2OTU5MyknPgo8dXNlIHg9JzU2LjQxMzI2NycgeT0nNjUuNzUzNDI1JyB4bGluazpocmVmPScjZzItNDknLz4KPHVzZSB4PSc2Mi4yNjYyNTcnIHk9JzY1Ljc1MzQyNScgeGxpbms6aHJlZj0nI2cyLTQ4Jy8+Cjx1c2UgeD0nNjguMTE5MjQ4JyB5PSc2NS43NTM0MjUnIHhsaW5rOmhyZWY9JyNnMC01OCcvPgo8dXNlIHg9JzcxLjM3MDkwOScgeT0nNjUuNzUzNDI1JyB4bGluazpocmVmPScjZzItNTEnLz4KPHVzZSB4PSc3Ny4yMjM4OTknIHk9JzY1Ljc1MzQyNScgeGxpbms6aHJlZj0nI2cwLTEwMScvPgo8dXNlIHg9JzgyLjY0OTMzOScgeT0nNjAuODE3MjM5JyB4bGluazpocmVmPScjZzEtNTAnLz4KPC9nPgo8L3N2Zz4=",
"width": 50,
"operation": "insert",
"args": ["\\num{}"],
},
{
"latex": "ang",
"width": 15,
"operation": "insert",
"args": ["\\ang{}"],
}
]
});
});
</script>
</body>