-
MathType
-
WirisQuizzes
-
Nubric
-
CalcMe
-
MathPlayer
-
Store FAQ
-
MathFlow
-
BF FAQ
-
Miscellaneous
-
Wiris Integrations
Use MathType with CKEditor 4 via CDN
Reading time: 2minUse this guide when you want to integrate MathType into CKEditor 4 without installing CKEditor locally or managing editor packages through npm.
Version compatibility
This guide applies to CKEditor 4 and the MathType CDN integration. For newer CKEditor versions, use the npm-based integration described in Integrate MathType with CKEditor.
Before you begin
Requirements
- A web application that can load external JavaScript resources.
- Internet access to the CKEditor and MathType CDNs.
- A valid MathType license for production use.
Applies to
MathType for HTML editors · CKEditor 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 CKEditor 4 CDN</title>
</head>
<body>
<textarea id="editor">
<p>Try me!</p>
</textarea>
</body>
</html>Load CKEditor 4 from the CDN
Add the CKEditor 4 script to the page.
<script src="https://cdn.ckeditor.com/4.25.1-lts/standard-all/ckeditor.js"></script>CKEditor 4 licensing
Recent CKEditor 4 LTS releases require a valid CKEditor license. If you are evaluating this integration and do not have a CKEditor license available, you can temporarily use CKEditor 4.22.1 for testing purposes.
Register the MathType plugin
Configure CKEditor to load the MathType plugin from the MathType CDN.
<script>
CKEDITOR.plugins.addExternal(
'ckeditor_wiris',
'https://www.wiris.net/demo/plugins/ckeditor/',
'plugin.js'
);
</script>Configure CKEditor
Replace the textarea with a CKEditor instance and enable the MathType plugin.
<script>
CKEDITOR.replace('editor', {
extraPlugins: 'ckeditor_wiris',
allowedContent: true,
toolbar: [
{
name: 'basicstyles',
items: ['Bold', 'Italic']
},
{
name: 'wirisplugins',
items: [
'ckeditor_wiris_formulaEditor',
'ckeditor_wiris_formulaEditorChemistry'
]
}
]
});
</script>Load the page
Open the page in a browser.
Verify it worked
Check that:
- CKEditor 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
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
ckeditor_wirisplugin is registered usingCKEDITOR.plugins.addExternal. - The plugin name is included in
extraPlugins. - The toolbar configuration includes the MathType buttons.
The MathType editor does not open
Verify that the MathType plugin URL is reachable:
https://www.wiris.net/demo/plugins/ckeditor/plugin.js