To use the MathQuill API, first get the latest version of the interface:
var MQ = MathQuill.getInterface(2);
MathQuill overwrites the global MathQuill
variable when loaded. You can undo that with .noConflict()
(similar to [jQuery.noConflict()
] (http://api.jquery.com/jQuery.noConflict)):
<script src="/path/to/first-mathquill.js"></script> <script src="/path/to/second-mathquill.js"></script> <script> var secondMQ = MathQuill.noConflict().getInterface(2); secondMQ.MathField(...); var firstMQ = MathQuill.getInterface(2); firstMQ.MathField(...); </script>
(Warning: This lets different copies of MathQuill each power their own math fields, but using different copies on the same DOM element won't work. Anyway, .noConflict() is primarily to help you reduce globals.)
Creates a non-editable MathQuill with the contents of the HTML element and returns a static MathField object.
If the element is already a static MathField, this will return a new static Mathfield object with the same ID. If the element is a different type of MathQuill element, this will return null.
Creates an editable MathQuill with the contents of the HTML element and returns an editable MathField object.
If the element is already an editable MathField, this will return a new editable Mathfield object with the same ID. If the element is a different type of MathQuill element, this will return null.
MQ
itself is a function that takes an HTML element and, if it's the root HTML element of a static math or math field, returns an API object for it (if not, null
):
MQ(mathFieldSpan) instanceof MQ.MathField // => true MQ(otherSpan) // => null
var staticMath = MQ.StaticMath(staticMathSpan); mathField instanceof MQ.StaticMath // => true mathField instanceof MQ // => true mathField instanceof MathQuill // => true var mathField = MQ.MathField(mathFieldSpan); mathField instanceof MQ.MathField // => true mathField instanceof MQ.EditableField // => true mathField instanceof MQ // => true mathField instanceof MathQuill // => true
API objects for the same MathQuill instance have the same .id
, which will always be a unique truthy primitive value that can be used as an object key (like an ad hoc Map
or Set
):
MQ(mathFieldSpan).id === mathField.id // => true var setOfMathFields = {}; setOfMathFields[mathField.id] = mathField; MQ(mathFieldSpan).id in setOfMathFields // => true staticMath.id in setOfMathFields // => false
Similarly, API objects for the same MathQuill instance share a .data
object (which can be used like an ad hoc WeakMap
or WeakSet
):
MQ(mathFieldSpan).data === mathField.data // => true mathField.data.foo = 'bar'; MQ(mathFieldSpan).data.foo // => 'bar'
These are methods that every MathField has. These are the only methods that static fields have and a subset of the methods that editable fields have.
Any element that has been MathQuill-ified can be reverted:
<span id="revert-me" class="mathquill-static-math"> some <code>HTML</code> </span>
MQ($('#revert-me')[0]).revert().html(); // => 'some <code>HTML</code>'
MathQuill uses computed dimensions, so if they change (because an element was mathquill-ified before it was in the visible HTML DOM, or the font size changed), then you'll need to tell MathQuill to recompute:
var mathFieldSpan = $('<span>\\sqrt{2}</span>'); var mathField = MQ.MathField(mathFieldSpan[0]); mathFieldSpan.appendTo(document.body); mathField.reflow();
Returns the root HTML element.
Returns the contents of the MathField as static HTML
Returns the contents as LaTeX
This will render the argument as LaTeX
Editable MathFields have all of the above methods in addition to the ones listed here.
Puts the focus on the editable field.
Removes focus from the editable field.
Write the given LaTeX at the current cursor position. If the cursor does not have focus, it writes it to last position the cursor occupied in the mathField.
mathField.write(' - 1'); // writes ' - 1' to mathField after the cursor position.
Enter a LaTeX command at the current cursor position or with the current selection. If the cursor does not have focus, it writes it to last position the cursor occupied in the mathField.
mathField.cmd('\\sqrt'); // writes a square root character after the cursor position.
Selects the contents (just like on textarea
s and on input
s).
Clears the current selection.
Move the cursor to the left/right end of the editable field, respectively. These are implemented in terms of moveToDirEnd
, shown below.
Moves the cursor to the end of the mathfield in the direction specified. The direction can be one of MQ.L
or MQ.R
. These are constants that obey the contract that MQ.L === -MQ.R
and vice versa. This function may be easier to use than the functions above it if used in the moveOutOf
handler when setting the configuration of a mathField.
var mathFieldConfig = { handlers: { moveOutOf: function(direction, mathField) { mathField.movetoDirEnd(direction); } } });
Simulates keystrokes given a string like "Ctrl-Home Del"
, a whitespace-delimited list of key inputs with optional prefixes.
mathField.keystroke('Shift-Left'); // Selects character before the current cursor position
Simulates typing text, one character at a time.
// Types part of the demo from mathquill.com without delays between keystrokes mathField.typedText('x=-b\\pm \\sqrt b^2 -4ac');
Insert a custom embedded element at the given coordinates, where options
is an object like:
{ htmlString: '<span class="custom-embed"></span>', text: function() { return 'custom_embed'; }, latex: function() { return '\customEmbed'; } }
Allows MathQuill to parse custom embedded objects from latex, where options
is an object like the one defined above in .dropEmbedded
. This will parse the following latex into the embedded object you defined: \embed{name}[id]}
.
Methods marked as experimental may be altered drastically or removed in future versions. They may also receive less maintance than other non-experimental features.