How to add an embeddable WYSIWYG equation editor with JavaScript?

Sometimes, we want to add an embeddable WYSIWYG equation editor with JavaScript.

In this article, we’ll look at how to add an embeddable WYSIWYG equation editor with JavaScript.

How to add an embeddable WYSIWYG equation editor with JavaScript?

To add an embeddable WYSIWYG equation editor with JavaScript, we can use the MathQuill library.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css">`

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js" type="text/javascript"></script>

<div>

</div>

to add the scripts and styles required for MathQuill.

We also add a div that’s used as the container for the editor.

Then we write:

const htmlElement = document.querySelector('div');
const config = {
  handlers: {
    edit() {}
  },
  restrictMismatchedBrackets: true
};
const MQ = MathQuill.getInterface(2);
const mathField = MQ.MathField(htmlElement, config);
mathField.latex('2^{\\frac{3}{2}}');

to select the div with document.querySelector.

And then we call MathQuill.getInterface to return a MathQuill instance.

And then we call MQ.MathField to add an equation input.

Next, we call latex with some Latex code to add some math expressions.

Conclusion

To add an embeddable WYSIWYG equation editor with JavaScript, we can use the MathQuill library.