search

mathquill / mathquill

Easily type math in your webapp
http://mathquill.com
Mozilla Public License 2.0
2.65k stars 700 forks source link

Can't get MathField to work on a very basic example #1045

Open wqferr opened 6 months ago

wqferr commented 6 months ago

The following code produces a text field that is not selectable with the mouse, only through "tab"bing. No latex symbols are rendered, I cannot delete any characters inside it. As far as I'm aware, I followed the loading instructions properly.

I am using FireFox 123.0 (64-bit) primarily, but the same behavior occurs in Chrome 122.0.6261.95 (Official Build) (64-bit), both on Windows 11.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="mathquill-0.10.1/mathquill.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="mathquill-0.10.1/mathquill.js"></script>
</head>
<body>
    <input type="text" name="func" id="func" />
    <script>
        var MQ = MathQuill.getInterface(2);
        let tf = document.getElementById("func");
        MQ.MathField(tf);
    </script>
</body>
</html>
DragonflyRobotics commented 5 months ago

Hello! Looks like you are using which will not work since the MathQuill render will be a bunch of smaller nested elements so you have to use instead like this:

<!DOCTYPE html>
<html lang="en">
<head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"/> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"></script>

</head>
<body>
        <span id="func"></span>
    <script>
        var MQ = MathQuill.getInterface(2);
        let tf = document.getElementById("func");
        MQ.MathField(tf);
    </script>
</body>
</html>

I am using the CDN for the mathquill JS and CSS but if you want to locally load them, make sure the path is all good!

My code was tested on: