-
MathType
-
WirisQuizzes
-
Nubric
-
CalcMe
-
MathPlayer
-
Store FAQ
-
MathFlow
-
BF FAQ
-
Miscellaneous
-
Wiris Integrations
Use MathType with TinyMCE 5 using CDN
Reading time: 2minUse this guide when you want to integrate MathType into TinyMCE 5 without installing TinyMCE locally or managing editor packages through npm.
Version compatibility
This guide applies to TinyMCE 5 and the MathType CDN integration. For newer TinyMCE versions, use the npm-based integration described in Integrate MathType with TinyMCE.
Before you begin
Requirements
- A web application that can load external JavaScript resources.
- Internet access to the TinyMCE and MathType CDNs.
- A valid MathType license for production use.
Applies to
MathType for HTML editors · TinyMCE integrations
Steps
Create a basic HTML page
Create a new HTML file (for example, index.html) and add a basic structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MathType with TinyMCE 5 CDN</title>
</head>
<body>
<textarea id="editor">
<p>Try me!</p>
</textarea>
</body>
</html>Load TinyMCE 5 from CDN
Add the TinyMCE 5 script to the page.
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>If you have a TinyMCE API key, replace no-api-key with your key.
Register the MathType plugin
Configure TinyMCE to load the MathType plugin from the MathType CDN.
external_plugins: {
tiny_mce_wiris:
'https://www.wiris.net/demo/plugins/tiny_mce/plugin.js'
}Configure TinyMCE
Initialize TinyMCE and enable the MathType plugin.
<script>
tinymce.init({
selector: '#editor',
external_plugins: {
tiny_mce_wiris:
'https://www.wiris.net/demo/plugins/tiny_mce/plugin.js'
},
toolbar:
'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry'
});
</script>Load the page
Open the page in a browser.
Verify it worked
Check that:
- TinyMCE loads successfully.
- MathType and ChemType buttons appear in the toolbar.
- Clicking either button opens the corresponding editor.
- You can insert a formula into the editor.
- Existing formulas can be edited again.
Options and variations
Framework-based integration (React, Angular, etc.)
If you're using a framework, the integration steps differ depending on your setup. See Use MathType with TinyMCE in React and Use MathType with TinyMCE in Angular.
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.
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.
Common errors
The MathType buttons do not appear
Verify that:
-
The
external_pluginsconfiguration includes the MathType plugin. - The plugin URL is reachable.
- The toolbar configuration includes the MathType buttons.
The MathType editor does not open
Verify that the MathType plugin URL is accessible:
https://www.wiris.net/demo/plugins/tiny_mce/plugin.js