在 ReactJS 中使用 WIRISplugin 顯示來自 CKeditor5 的數學方程

Question

我試圖將<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>放在 index.html 的<head>中但是，由於某種原因，使用 reactjs 這對我不起作用。

客戶端/公共/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 mol ⇄ a∆N

預期成績：

有人可以幫助我嗎？ 我已經閱讀了 Wiris 網站 ( https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode ) 上的文檔，但我無法確定為什么這不起作用。

Answer 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 />組件包裹你的內容，它會渲染你的方程

在 ReactJS 中使用 WIRISplugin 顯示來自 CKeditor5 的數學方程

問題描述

1 個解決方案

解決方案1
0 2021-05-22 12:49:42

在 ReactJS 中使用 WIRISplugin 顯示來自 CKeditor5 的數學方程

問題描述

1 個解決方案

解決方案1 0 2021-05-22 12:49:42

解決方案1
0 2021-05-22 12:49:42