Documentation / MathType

  • Demos
  • Visit our website
  • Downloads
  • Contact us
  • MathType

    • Wiris Quizzes

      • Learning Lemur

        • CalcMe

          • MathPlayer

            • Store FAQ

              • VPAT for the electronic documentation

                • MathFlow

                  • BF FAQ

                    • Home
                    • MathType
                    • MathType Integrations
                    • MathType for HTML editors
                    • MathType for HTML editors

                    MathType for CKEditor

                    Reading time: 4min

                    Before you continue reading

                    The following article assumes the MathType integrations architecture. We encourage you to grasp the architecture to properly understand the Frontend and Services notation and choose the appropriate deployment to satisfy your needs.

                     

                    Demos and integration downloads

                    Demo Download
                    Live demo Quickstart codes

                    Collaborative mode

                    Note MathType is compatible with CKEditor's collaborative mode, allowing your users to write equations simultaneously in a shared document.

                     

                    Requirements

                    • CKEditor 3.0 or higher installed.
                    • A valid license to install the integration in a production environment; otherwise, you can use the downloaded file just for demo purposes.

                    Frontend + Cloud Services

                    npm Installation steps

                    Generic Installation

                    CKEditor 5

                    Requirements:

                    npm (v6.13.4)

                    Steps:

                    1. Install the npm module:   

                    npm install @wiris/mathtype-ckeditor5

                    2. Update the CKEditor configuration by adding the new plugin and including the MathType and ChemType buttons:   

                    import MathType from '@wiris/mathtype-ckeditor5/src/plugin'; ... ClassicEditor .create( editorElement, { plugins: [ ..., MathType, ... ], toolbar: { items: [ ... 'MathType', 'ChemType', ... ] },
                     
                     

                    CKEditor 4

                    Requirements:

                    • npm (v6.13.4)

                    Steps:

                    1. Install the npm module:   

                    npm install @wiris/mathtype-ckeditor4

                    2. Add the plugin as an external plugin:   

                    CKEDITOR.plugins.addExternal('ckeditor_wiris', '../node_modules/@wiris/mathtype-ckeditor4/', 'plugin.js');

                    3. Update the CKEditor configuration by adding the new plugin, allowing MathML content, and adding the MathType and ChemType buttons to the toolbar:   

                    CKEDITOR.replace('editor', { //eslint-disable-line extraPlugins: 'ckeditor_wiris', // Allow MathML content. allowedContent: true, toolbar: [ { name: 'wirisplugins', items: ['ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry'] }, // To avoid errors and have mathtype fully functional { name: 'others' }, ], // language: 'de', // mathTypeParameters: { // editorParameters: { language: 'es' }, // MathType config, including language // }, });

                    Notice the example assumes this directory structure:

                    └───index.html
                                                                                                        └───node_modules
                                                                                                         └───@wiris/mathtype-ckeditor4
                     
                     

                    Add the Services to the Frontend

                    If you need additional configurations (e.g., MathType's editor customization or specific cache storage destination), you need to install the integration services.

                    These services are available for various technologies. Hit on the technology you are using to see full instructions.

                    CKEditor 5

                    Java

                    To install the Java services follow the steps below:

                    1. Download the MathType Web Integration Services - Java package.
                    2. Deploy the pluginwiris_engine war file.
                    3. Add mathTypeParameters to CKEditor5 with the configuration below:
                    ClassicEditor.create( document.querySelector( '#example' ), {
                                                                                                             plugins: [ ..., MathType, ... ],
                                                                                                             toolbar: {
                                                                                                             items: [
                                                                                                             ...,
                                                                                                             'MathType',
                                                                                                             'ChemType',
                                                                                                             ...,
                                                                                                             ]
                                                                                                             },
                                                                                                             language: 'en',
                                                                                                             // MathType Parameters
                                                                                                             mathTypeParameters : {
                                                                                                             serviceProviderProperties : {
                                                                                                             URI : '/pluginwiris_engine/app/configurationjs',
                                                                                                             server : 'java'
                                                                                                             }
                                                                                                             }
                                                                                                            }
                     
                     

                    PHP

                    To install the PHP services follow the steps below:

                    1. Download the MathType Web Integration Services - PHP package.
                    2. Copy the generic_wiris/integration folder into your project. For this example we are assuming that the services are located at DOCUMENT_ROOT/php-services/
                    3. Add mathTypeParameters to CKEditor5 with the configuration below:
                    ClassicEditor.create( document.querySelector( '#example' ), {
                                                                                                             plugins: [ ..., MathType, ... ],
                                                                                                             toolbar: {
                                                                                                             items: [
                                                                                                             ...,
                                                                                                             'MathType',
                                                                                                             'ChemType',
                                                                                                             ...,
                                                                                                             ]
                                                                                                             },
                                                                                                             language: 'en',
                                                                                                             // MathType Parameters
                                                                                                             mathTypeParameters : {
                                                                                                             serviceProviderProperties : {
                                                                                                             URI : 'http://localhost/php-services/integration',
                                                                                                             server : 'php'
                                                                                                             }
                                                                                                             }
                                                                                                            }
                     
                     
                     
                     

                    CKEditor 4

                    ASP.NET

                    To install the PHP services follow the steps below:

                    1. Download the MathType Web Integration Services - Aspx package.
                    2. Copy the generic_wiris/integration folder into your project. For this example we are assuming that the services are located at DOCUMENT_ROOT/aspx-services/
                    3. Add the following attribute to CKEditor 4 configuration:
                    CKEDITOR.editorConfig = function( config ) {
                                                                 config.mathTypeParameters : {
                                                                 serviceProviderProperties : {
                                                                 URI : 'http://localhost/aspx-services/integration',
                                                                 server : 'aspx'
                                                                 }
                                                                 }
                                                                }
                     
                     

                    Java

                    To install the Java services follow the steps below:

                    1. Download the MathType Web Integration Services - Java package.
                    2. Deploy the pluginwiris_engine war file.
                    3. Add the following attribute to CKEditor 4 configuration:
                    CKEDITOR.editorConfig = function( config ) {
                                                                 config.mathTypeParameters : {
                                                                 serviceProviderProperties : {
                                                                 URI : '/pluginwiris_engine/app/configurationjs',
                                                                 server : 'java'
                                                                 }
                                                                 }
                                                                }
                     
                     

                    Ruby

                    To install the Ruby on Rails services follow the steps below:

                    1. Download the MathType Web Integration Services - Ruby on Rails package.
                    2. Install the wirispluginengine.gem gem. 
                      gem install -l wirispluginengine.gem
                    3. Add the following attribute to CKEditor 4 configuration:
                    CKEDITOR.editorConfig = function( config ) {
                                                                 config.mathTypeParameters : {
                                                                 serviceProviderProperties : {
                                                                 URI : '/wirispluginengine/integrationn',
                                                                 server : 'ruby'
                                                                 }
                                                                 }
                                                                }
                     
                     

                    PHP

                    To install the PHP services follow the steps below:

                    1. Download the MathType Web Integration Services - PHP package.
                    2. Copy the generic_wiris/integration folder into your project. For this example, we are assuming that the services are located at DOCUMENT_ROOT/php-services/
                    3. Add the following attribute to CKEditor 4 configuration:
                    CKEDITOR.editorConfig = function( config ) {
                                                                 config.mathTypeParameters : {
                                                                 serviceProviderProperties : {
                                                                 URI : 'http://localhost/php-services/integration',
                                                                 server : 'php'
                                                                 }
                                                                 }
                                                                }
                     
                     
                     
                     

                    External integration

                    Some rich text editors, such as CKEditor or TinyMCE, allow you to specify a URL based location of plugins outside of the normal plugins directory.

                    This option is useful when loading the rich text editor from a CDN or when you want to have the editor directory separate from your custom integrations. In case you are using a programing language for which MathType Integrations are not available this is also a good option.

                    You can install MathType integration as an external integration in CKEditor. Using this option you do not need to install any component on your servers. You only need to add the following line to your CKEditor configuration.

                    CKEDITOR.plugins.addExternal('ckeditor_wiris', 'https://www.wiris.net/demo/plugins/ckeditor/', 'plugin.js');
                                    

                    To Include MathType buttons in CKEditor's toolbar:

                    config.toolbar_Full.push({ name: 'wiris', items : [ 'ckeditor_wiris_formulaEditor','ckeditor_wiris_formulaEditorChemistry']});
                                    

                    Frontend + On-premises Services

                    1. Copy files and configuration

                    Unzip the CKEditor MathType integration and copy the ckeditor_wiris directory into your CKEditor integration directory. For example, you will have ckeditor/plugins/ckeditor_wiris. The name of the MathType integration directory must be ckeditor_wiris.

                    Technologies

                    Our integration is available for various technologies. Click below on the technology you are using to see full instructions you should follow.

                    Java

                    • Install the pluginwiris_engine.war' in your Java web applications server. For example, tomcat.
                    • Give write permissions to pluginwiris_engine/cache and to pluginwiris_engine/formulas directories to the web server user. Those folders will be used to store formula MathML codes and temporal images. If you prefer, you can configure the location of these folders.

                    Configuration

                    Edit ckeditor/plugins/ckeditor_wiris/configuration.ini to set your own values.This table specifies all possible parameters.

                     
                     

                    PHP

                    • mbstring extension must be installed and enabled in the server.
                    • Give execution rights to the web server user on the PHP files contained at to ckeditor/plugins/ckeditor_wiris/integration.
                    • Give write permissions to ckeditor/plugins/ckeditor_wiris/cache and to ckeditor/plugins/ckeditor_wiris/formulas directories to the web server user. Those folders will be used to store formula MathML codes and temporal images. If you prefer, you can configure the location of these folders.
                    • Very large formulas may not be rendered if the output_buferring option is enabled. Either disable it or set a high enough value in your server's php.ini file.

                    Configuration

                    Edit configuration.ini file on wirispluginengine gem root directory. This table specifies all possible parameters.

                     
                     

                    2. Include it in your platform

                    You must include some content on your CKEditor configuration file ckeditor/config.js (see CKEditor documentation).

                    For CKEditor 4

                    The result should be like this:

                    /*
                                    Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
                                    For licensing, see LICENSE.html or http://ckeditor.com/license
                                    */
                                    CKEDITOR.editorConfig = function( config )
                                    {
                                     // Add[MT]to the integration list
                                     config.extraPlugins += (config.extraPlugins.length == 0 ? '' : ',') + 'ckeditor_wiris';
                                    };
                                    If you use the Full MathML mode and for CKeditor versions higher than 4.0 you have to add this line as well:
                                    config.allowedContent = true;
                                    

                    Caution

                    If you have a configured custom toolbar, you must add ckeditor_wiris_formulaEditor', ckeditor_wiris_formulaEditorChemistry' buttons where you want.

                     

                    3. WIRISplugins.js

                    Add WIRISplugin.js script. Follow this instructions.

                    4. Testing

                    In order to check if the integration is installed correctly, there is a page that makes some tests on your server. Open this link to see where is your test page.

                    5. Clean and backup

                    Visit this page if you want to know how to clean the cache folder and backup your formula images.

                    Was this article helpful?

                    Yes
                    No
                    Give feedback about this article

                    Related Articles

                    • MathType for WPS Writer / Kingsoft Writer
                    • MathType MTEF v.5 (MathType 4.0 and later)
                    • MathType integrations architecture

                    MathType for CKEditor

                    Before you continue reading Demos and integration downloads Collaborative mode Requirements Frontend + Cloud Services npm Installation steps Generic Installation Add the Services to the Frontend External integration Some rich text editors, such as CKEditor or TinyMCE, allow you to specify a URL based location of plugins outside of the normal plugins directory. Frontend + On-premises Services 1. Copy files and configuration Technologies 2. Include it in your platform For CKEditor 4 Caution 3. WIRISplugins.js 4. Testing 5. Clean and backup

                    Making people’s STEM work more meaningful

                    MathType

                    • MathType for Office Tools
                    • MathType for Mac
                    • MathType for Microsoft 365
                    • MathType for Google Workspace
                    • MathType for LMS
                    • MathType for XML Editors
                    • Arabic notation
                    • Our products accessibility
                    • MathType is online

                    WirisQuizzes

                    Learning Lemur

                    Solutions for Education

                    • Blackboard Learn
                    • Brightspace by D2L
                    • Canvas
                    • Google Classroom
                    • Moodle
                    • Schoology

                    Solutions for Publishing Houses

                    Solutions for Technical Writers

                    Solutions for Chemistry

                    Integrations

                    • HTML Editors
                    • MathType in WordPress

                    Pricing

                    Company

                    Careers

                    Blog

                    Contact Us

                    Buy Now

                    Plugin Downloads

                    © Wiris 2025

                    • Cookie Preferences
                    • Cookie Policy
                    • Terms of Use
                    • Privacy Policy / GDPR
                    • Student Data Privacy
                    • Compliance
                    • Powered by Helpjuice
                    Expand