在ReactJS中使用WIRISplugin显示CKeditor5中的数学公式_Reactjs_Ckeditor_Mathml_Wiris

在ReactJS中使用WIRISplugin显示CKeditor5中的数学公式

reactjs ckeditor

在ReactJS中使用WIRISplugin显示CKeditor5中的数学公式,reactjs,ckeditor,mathml,wiris,Reactjs,Ckeditor,Mathml,Wiris,我曾尝试使用reactjs将放在index.html的中，但是，由于某种原因，这对我不起作用 client/public/index.html <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=dev

我曾尝试使用reactjs将

放在index.html的

中，但是，由于某种原因，这对我不起作用

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>


门户

当我运行应用程序时，数学公式仍然没有显示，我在控制台上收到404错误，因为脚本无法访问wirisurl并获取插件

目前的结果：

a3xy=∞∅π 21,4摩尔⇄ A.∆N

有人能帮我吗？我已经阅读了Wiris网站（）上的文档，但我无法确定为什么这不起作用

将以下脚本添加到index.html或要呈现mathml的页面

创建一个新组件，该组件将用于渲染数学方程

功能乳胶（道具）{
const node=React.createRef（）；
常量renderMath=（）=>{
Queue（['Typeset'，window.MathJax.Hub，node.current]）；
};
useffect（（）=>{
renderMath（）；
});
返回(
{props.children}
);
}

用

组件包装您的内容，它将呈现您的方程式

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

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>
  );
}