在 ReactJS 中使用 WIRISplugin 显示来自 CKeditor5 的数学方程答案

【问题标题】：Display Math equation from CKeditor5 with WIRISplugin in ReactJS在 ReactJS 中使用 WIRISplugin 显示来自 CKeditor5 的数学方程
【发布时间】：2021-01-14 00:26:00
【问题描述】：

我尝试使用 reactjs 将 <script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script> 放在我的 index.html 的 <head> 中，但是由于某种原因这对我不起作用。

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 错误，因为脚本无法访问 Wiris URL 并获取插件。

目前的结果：

a3xy=∞∅π 21,4 摩尔⇄ aΔN

Expected results:

有人可以帮我吗？我已阅读 Wiris 网站 (https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode) 上的文档，但无法确定为什么这不起作用。

【问题讨论】：

标签： reactjs ckeditor mathml wiris

【解决方案1】：

将以下脚本添加到您的 index.html 或您要呈现 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>

创建一个用于渲染数学方程式的新组件

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

用<Latex /> 组件包装您的内容，它将呈现您的方程式

【讨论】：