Display Math equation from CKeditor5 with WIRISplugin in ReactJS

Question

Display Math equation from CKeditor5 with WIRISplugin in ReactJS

951 views Asked by Eduardo Paes At 13 September 2024 at 20:28

I've tried to put <script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script> in the <head> of my index.html using reactjs, however, for some reason this didn't work for me.

client/public/index.html

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Portal</title>

    <!-- WIRISplugin -->
    <script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script> 

  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

When I run the app the math equation remains not displaying and I received on console the 404 error, as the script wasn't able to access the Wiris URL and get the plugin.

Current results:

a3xy=∞∅π 21,4 mol ⇄ a∆N

Expected results:

Could someone help me? I've read the documentation on the Wiris website (https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode), but I wasn't able to identify why this didn't work.

Original Q&A

There are 1 answers

**virajs0ni** · Answer 1 · 2021-05-22 12:49:42

Add the below script to your index.html or the page where you want to render mathml

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Create a new component which will be used to render your math equations

function Latex(props) {
  const node = React.createRef();
  const renderMath = () => {
    window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, node.current]);
  };
  useEffect(() => {
    renderMath();
  });

  return (
    <div ref={node} {...props}>
      {props.children}
    </div>
  );
}

Wrap your content with <Latex /> component and it will render your equations

TechQA.

Display Math equation from CKeditor5 with WIRISplugin in ReactJS

There are 1 answers

Related Questions in REACTJS

Related Questions in CKEDITOR

Related Questions in MATHML

Related Questions in WIRIS

Popular Questions

Popular Tags

Trending Questions