Skip to content
SOWISO logo SOWISO logo SOWISO

Formulaeditor Input

The formulaeditor library contains a web component which enables you to easily load a formulaeditor input field on your webpage. Simply load the formulaeditor script on the page and add the tag of the web component to your HTML.

Here’s an example of what this could look like:

<!-- We will shorten the path needed to specify here in a future release -->
<script type="module" src="/sowiso/formulaeditor/org/mathdox/formulaeditor/FEConcatenation.js"></script>

<body>
  <sowiso-formulaeditor-input></sowiso-formulaeditor-input>
</body>

The web component

The web component itself exposes three functions:

  • getInput(resetFocus = false): returns an object containing the current value of the input field in mathMl and openMath format, but only if the input contains valid math. Otherwise, these values will be null. In addition to this, this function returns a data URI containing a representation of the image of the formula as well, which can for example be used to insert an image of the formula into a rich text editor. Creating an image also works for invalid math, so this value is always specified.
    The formulaeditor will keep focus if it had focus when the method was called.
    resetFocus: if true, the formulaeditor will get focus if it was the last focused editor

Shortened example of return data

    {
        mathMl: "<math xmlns'http://www.w3.org/1998/Math/MathML'><mn>1</mn></math>",
        openMath: "<OMOBJ xmlns='http://www.openmath.org/OpenMath' version='2.0' cdbase='http://www.openmath.org/ [...],
        dataUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAaCAYAAAAdQLrBAAAAAXNSR0IArs4c6QAAAhBJREFUW [...]
    }

  • focusInput(): can be used to programmatically focus the input.

  • loadMathml(mathml): can be used to programmatically insert a mathml string as replacement of the current input.

The web component takes two optional attributes:

  • auto-focus: can be used to automatically focus the input as soon as it is instantiated.
  • math: can be used to instantiate the input with pre-filled math. Should be passed in valid openMath format. This can for example be used to edit a formula you’ve created before.

Example of the web component with both attributes specified (but shortened math)

<sowiso-formulaeditor-input
    auto-focus
    math="<OMOBJ xmlns='http://www.openmath.org/OpenMath' version='2.0' cdbase='http://www.openmath.org/cd'><OMA> [...]"
>
</sowiso-formulaeditor-input>