0

I want to render MathML but when I push data into dom all math tags and its subtags get removed

I and inserting this data in quill view, div and innerHtml but in all cases problem is same

<p>In elementary algebra, the <b>quadratic formula</b> is the solution of the quadratic equation.</p>
<p style="text-align: center;">
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mi>x</mi>
        <mo>=</mo>
        <mfrac>
            <mrow>
                <mo>-</mo>
                <mi>b</mi>
                <mo>&#177;</mo>
                <msqrt>
                    <msup>
                        <mi>b</mi>
                        <mn>2</mn>
                    </msup>
                    <mo>-</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mi>c</mi>
                </msqrt>
            </mrow>
            <mrow>
                <mn>2</mn>
                <mi>a</mi>
            </mrow>
        </mfrac>
    </math>
</p>
<p><b>Water is made from two elements</b> - Hydrogen and Oxygen. If you put the two gases together, along with energy, you can make water.</p>
<p style="text-align: center;">
    <math class="wrs_chemistry" xmlns="http://www.w3.org/1998/Math/MathML">
        <mn>2</mn>
        <msub>
            <mi mathvariant="normal">H</mi>
            <mn>2</mn>
        </msub>
        <mfenced>
            <mi mathvariant="normal">g</mi>
        </mfenced>
        <mo>+</mo>
        <msub>
            <mi mathvariant="normal">O</mi>
            <mn>2</mn>
        </msub>
        <mfenced>
            <mi mathvariant="normal">g</mi>
        </mfenced>
        <mo>&#8652;</mo>
        <mn>2</mn>
        <msub>
            <mi mathvariant="normal">H</mi>
            <mn>2</mn>
        </msub>
        <mi mathvariant="normal">O</mi>
        <mfenced>
            <mi mathvariant="normal">l</mi>
        </mfenced>
    </math>
</p>
<p>The entire formula for the surface area of a cylinder is
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mn>2</mn>
        <msup>
            <mi>&#960;r</mi>
            <mn>2</mn>
        </msup>
        <mo>+</mo>
        <mn>2</mn>
        <mi>&#960;rh</mi>
    </math>
</p>

But in Dome, I am not able to see all math tags I am getting this My expectation is this

Please help I am struggling on it since last 3 days

Terry
  • 63,248
  • 15
  • 96
  • 118
santosh vishwakarma
  • 1
  • 1
  • That is because QuillJS does not recognize custom MathML tags like that. When QuillJS encounters tags that are not in a restrictive set of tags it recognizes, it simply strips them out. A solution will be to [create your own custom tag/format](https://stackoverflow.com/questions/37525867/how-can-i-add-a-new-format-hr-tag-to-quill-js) for QuillJS. – Terry Jun 29 '21 at 08:48
  • Ok but it should work if in push into div with inner Html but there also I got the same issue – santosh vishwakarma Jun 29 '21 at 09:31
  • It doesn't matter: QuillJS looks into the pasted content and will strip out whatever tags it does not recognize, no matter how deeply nested they are. In short, without any changes, you cannot embed MathML using QuillJS unless you write your own custom tag/format to handle it. – Terry Jun 29 '21 at 09:52
  • It's not quill I removed quill completely but still the same issue is coming – santosh vishwakarma Jun 29 '21 at 10:48

0 Answers0