I'm working on a React project using TinyMCE and trying to handle LaTeX equations with MathJax. My issue is that when I load content into the TinyMCE editor, the LaTeX equations do not render properly.

Example of the Content I'm Trying to Load:

<div style="position: absolute;">  
<p style="margin: 0; font-size: 12px;">\\\*\\\*(a)\\\*\\\* Solve: \\\\\\\[a\\\^{2}-ab+b\\\^{2}=3\\\\\\\] \\\\\\\[a+2b+1=0\\\\\\\]</p>  
</div>  
</div>

When this content loads into TinyMCE, the LaTeX does not render correctly. Instead, I just see the raw text with [ ... ] instead of the properly formatted equations.

What I Tried Wrapping the editor in MathJaxContext from better-react-mathjax – but this causes the content to show "undefined" instead of rendering the equations.

Ensuring MathType Plugin is Enabled – I’m using tiny_mce_wiris to handle math input.

Manually Triggering MathJax Rendering – Tried using window.MathJax.typeset() after loading content, but it didn’t help.

My TinyMCE Configuration

<Editor
  id={id}
  apiKey={process.env.REACT_APP_TINYMCE}
  value={value}
  init={{
    images_upload_handler: handleImageUpload,
    automatic_uploads: false,
    placeholder: '',
    height: height,
    width: '100%',
    draggable_modal: true,
    extended_valid_elements: '*[.*]',
    display: 'none',
    plugins: [
      'advlist',
      'autolink',
      'lists',
      'link',
      'image',
      'charmap',
      'preview',
      'anchor',
      'searchreplace',
      'visualblocks',
      'code',
      'fullscreen',
      'insertdatetime',
      'media',
      'table',
      'help',
      'wordcount',
      'tiny_mce_wiris',
    ],
    toolbar:
      'undo redo | formatselect | bold italic backcolor | \
      alignleft aligncenter alignright alignjustify | \
      bullist numlist outdent indent | removeformat | help | image | table | drawio | tiny_mce_wiris_formulaEditor | tiny_mce_wiris_formulaEditorChemistry',
    setup: (editor) => {
      editor.ui.registry.addButton('drawio', {
        text: 'Draw',
        onAction: () => {
          setIsDrawioOpen(true);
        },
      });
    },
    external_plugins: {
      tiny_mce_wiris: `https:url-to-plugin`,
    },
    forced_root_block: 'div',
  }}
  onEditorChange={handleEditorChange}
/>

What I Need Help With How can I get MathJax to properly render the LaTeX equations inside TinyMCE when loading content?

Is there a way to force MathJax to reprocess the editor content after it loads?

Should I be using a different approach to handle LaTeX inside TinyMCE?

Thanks you.

I'm working on a React project using TinyMCE and trying to handle LaTeX equations with MathJax. My issue is that when I load content into the TinyMCE editor, the LaTeX equations do not render properly.

Example of the Content I'm Trying to Load:

<div style="position: absolute;">  
<p style="margin: 0; font-size: 12px;">\\\*\\\*(a)\\\*\\\* Solve: \\\\\\\[a\\\^{2}-ab+b\\\^{2}=3\\\\\\\] \\\\\\\[a+2b+1=0\\\\\\\]</p>  
</div>  
</div>

When this content loads into TinyMCE, the LaTeX does not render correctly. Instead, I just see the raw text with [ ... ] instead of the properly formatted equations.

What I Tried Wrapping the editor in MathJaxContext from better-react-mathjax – but this causes the content to show "undefined" instead of rendering the equations.

Ensuring MathType Plugin is Enabled – I’m using tiny_mce_wiris to handle math input.

Manually Triggering MathJax Rendering – Tried using window.MathJax.typeset() after loading content, but it didn’t help.

My TinyMCE Configuration

<Editor
  id={id}
  apiKey={process.env.REACT_APP_TINYMCE}
  value={value}
  init={{
    images_upload_handler: handleImageUpload,
    automatic_uploads: false,
    placeholder: '',
    height: height,
    width: '100%',
    draggable_modal: true,
    extended_valid_elements: '*[.*]',
    display: 'none',
    plugins: [
      'advlist',
      'autolink',
      'lists',
      'link',
      'image',
      'charmap',
      'preview',
      'anchor',
      'searchreplace',
      'visualblocks',
      'code',
      'fullscreen',
      'insertdatetime',
      'media',
      'table',
      'help',
      'wordcount',
      'tiny_mce_wiris',
    ],
    toolbar:
      'undo redo | formatselect | bold italic backcolor | \
      alignleft aligncenter alignright alignjustify | \
      bullist numlist outdent indent | removeformat | help | image | table | drawio | tiny_mce_wiris_formulaEditor | tiny_mce_wiris_formulaEditorChemistry',
    setup: (editor) => {
      editor.ui.registry.addButton('drawio', {
        text: 'Draw',
        onAction: () => {
          setIsDrawioOpen(true);
        },
      });
    },
    external_plugins: {
      tiny_mce_wiris: `https:url-to-plugin`,
    },
    forced_root_block: 'div',
  }}
  onEditorChange={handleEditorChange}
/>

What I Need Help With How can I get MathJax to properly render the LaTeX equations inside TinyMCE when loading content?

Is there a way to force MathJax to reprocess the editor content after it loads?

Should I be using a different approach to handle LaTeX inside TinyMCE?

Thanks you.

• javascript
• reactjs
• tinymce
• mathjax

1 Answer 1

init_instance_callback: function (editor) {
            editor.on("Change", function () {
              setTimeout(() => {
                if (window.MathJax) {
                  MathJax.typesetPromise([editor.getBody()])
                    .then(() => {
                      console.log("MathJax re-rendered successfully!");
                      setMathValue(null);
                    })
                    .catch((err) => {
                      console.error("MathJax re-rendering failed: ", err);
                    });
                }
              }, 100);
            });
          },

also add the latex avlue in this format

<div class="latex">\\(${latex}\\)</div>

(latex = "\\frac{x}{y}")

you can add this this will render the latex but it does some unexpected behaviour so if you can fix let me know