Simple WYSIWYG Math Editor With jQuery And Mathquill - matheditor.js

matheditor.js is a tiny jQuery plugin used to generate a WYSIWYG math(formula) editor using the famous MathQuill JavaScript library.

How to use it:

1. Include the necessary jQuery and MathQuill JavaScript libraries on the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="lib/mathquill.min.js"></script>

2. Download and include the matheditor.js script after jQuery.

<script src="lib/matheditor.js"></script>

3. Create a container in which you want to place the math editor.

<div id="demo"></div>

4. The JavaScript to generate a default math editor inside the DIV container.

var myEditor = new MathEditor('demo')

5. Default editor buttons.

["fraction","square_root","cube_root","root",'superscript','subscript','multiplication','division','plus_minus','pi','degree','not_equal','greater_equal','less_equal','greater_than','less_than','angle','parallel_to','perpendicular','triangle','parallelogram'];

6. Add / remove editor buttons.

myEditor.buttons = ["fraction","square_root","cube_root","root",'superscript','subscript','multiplication','division','plus_minus','pi','degree','not_equal','greater_equal','less_equal','greater_than','less_than','angle','parallel_to','perpendicular','triangle','parallelogram'];["fraction","square_root","cube_root","root",'superscript','subscript','multiplication','division','plus_minus','pi','degree','not_equal','greater_equal','less_equal','greater_than','less_than','angle','parallel_to','perpendicular','triangle','parallelogram'];

myEditor.removeButtons(["fraction","square_root"])

7. Set the default template to 'keypad'.

myEditor.setTemplate('keypad');

8. Get the current value that will return letex for input formula.

myEditor.getValue();

9. Style the math editor whatever you like:

myEditor.styleMe({
  width: 500,
  height: 40,
  textarea_background: "#FFFFFF",
  textarea_foreground: "#000000",
  textarea_border: "#000000",
  toolbar_background: "#FFFFFF",
  toolbar_foreground: "#000000",
  toolbar_border: "#000000",
  button_background: "#FFFFFF",
  button_border: "#000000",
});

Change log:

2017-02-24

• mobile support added.

2016-12-06

• mobile support added.

2016-11-19

• keypad for mobile added

---

This awesome jQuery plugin is developed by karan101292. For more Advanced Usages, please check the demo page or visit the official website.