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.
