-
MathType
-
WirisQuizzes
-
Nubric
-
CalcMe
-
MathPlayer
-
Store FAQ
-
MathFlow
-
BF FAQ
-
Miscellaneous
-
Wiris Integrations
Use MathType with TinyMCE in React
Reading time: 2minUse this guide when you are integrating TinyMCE in a React application and want to enable MathType for formula editing.
Before you begin
Requirements
- A React application
- Node.js and npm
- A valid MathType license
Applies to
MathType for HTML editors · TinyMCE · React
Steps
Create or open your React project
If you already have a React application, use that project. Otherwise, create a new one and move into its directory.
npx create-react-app $APP_NAME
cd $APP_NAMEInstall TinyMCE, the React integration, MathType, and jQuery
Install the required packages for the editor and MathType integration.
npm install --save @tinymce/tinymce-react
npm install tinymce
npm install @wiris/mathtype-tinymce7
npm install jquery --saveThe package name depends on your TinyMCE version (e.g. tinymce5, tinymce6, tinymce7).
Load the MathType rendering script
Open src/index.js and add the following:
const jsDemoImagesTransform = document.createElement('script');
jsDemoImagesTransform.type = 'text/javascript';
jsDemoImagesTransform.src =
'https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image';
document.head.appendChild(jsDemoImagesTransform);Expose TinyMCE and jQuery globally
Add the following code in src/index.js, before initializing the editor:
import $ from 'jquery';
window.$ = $;
window.tinymce = require('tinymce');Then load the MathType plugin:
require('@wiris/mathtype-tinymce7');Add the MathType plugin to TinyMCE
Define the minimal editor configuration:
const options = {
external_plugins: {
tiny_mce_wiris: `${window.location.href}/node_modules/@wiris/mathtype-tinymce7/plugin.min.js`
},
toolbar:
'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',
extended_valid_elements: '*[.*]'
};Render the editor
import { Editor } from '@tinymce/tinymce-react';
function EditorTiny() {
return <Editor init={options} />;
}Load TinyMCE from the HTML page
Open the HTML file used by your React app and add this script inside the <head> element:
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>Start the development server
Run the development server through the specified command
npm run startFull example
If you want to test the full setup directly, your src/index.js can look like this:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { Editor } from '@tinymce/tinymce-react';
import $ from 'jquery';
const jsDemoImagesTransform = document.createElement('script');
jsDemoImagesTransform.type = 'text/javascript';
jsDemoImagesTransform.src = 'https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image';
document.head.appendChild(jsDemoImagesTransform);
window.$ = $;
window.tinymce = require('tinymce');
require('@wiris/mathtype-tinymce7');
const options = {
license_key: 'gpl',
height: 500,
menubar: false,
external_plugins: {
tiny_mce_wiris: `${window.location.href}/node_modules/@wiris/mathtype-tinymce7/plugin.min.js`
},
toolbar:
'undo redo | bold italic | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',
extended_valid_elements: '*[.*]'
};
function EditorTiny() {
return <Editor init={options} />;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<EditorTiny />);Verify it worked
- The TinyMCE editor loads in your React application.
- MathType and ChemType buttons appear in the TinyMCE toolbar.
- You can insert and edit a formula in the editor.
Options and variations
Advanced configuration
If you need advanced configuration, you can customize the editor's behaviour (such as the toolbar, language, or editor settings). See MathType configuration options.
Backend services
If you need backend services (Java or PHP), some deployments require additional services for formula rendering and storage. See MathType integrations deployment models.
Common errors
MathType buttons do not appear
Check the external_plugins path and confirm that the plugin file is reachable from the browser. The plugin may not be loaded correctly.
Failed to load plugin: tiny_mce_wiris
Ensure the URL used in external_plugins points to a valid file. The development server may not expose node_modules by default.
Formulas are not rendered correctly
Check that the WIRISplugins.js script is loaded in the page. Without it, formulas may not display properly.
MathML is removed from the editor
Ensure extended_valid_elements: '*[.*]' is included in the editor configuration. TinyMCE may otherwise filter MathML content.