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

                    • Miscellaneous

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

                      MathType for TinyMCE

                      Reading time: 7min

                      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 TinyMCE's collaborative mode, allowing your users to write equations simultaneously in a shared document.

                       

                      Requirements

                      • TinyMCE 5 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

                      General installation

                      Requirements:

                      • npm (v6.13.4)

                      Steps:

                      Note

                      Notice steps below assume the following directory structure:

                      └───index.html
                                                                                                              └───node_modules
                                                                                                               └───@wiris/mathtype-tinymce<VERSION_X>
                       

                      1. Install the MathType for Tinymce npm module:

                      npm install @wiris/mathtype-tinymce<VERSION_X>

                      Where <VERSION_X> can be 4 .x.x or 5.x.x or >= 6.1.0

                      2. Load the module into your project:

                      <script src="node_modules/@wiris/mathtype-tinymce<VERSION_X>/wiris.js"></script>

                      3. Update TinyMCE configuration options with our recommended settings:

                      // Set up the editor.
                                                                                               └───@wiris/mathtype-tinymceX
                                                                                              tinymce.init({
                                                                                               selector: '#editor',
                                                                                               external_plugins: {
                                                                                               tiny_mce_wiris: 'node_modules/@wiris/mathtype-tinymce<VERSION_X>/plugin.min.js',
                                                                                               },
                                                                                               // This option allows us to introduce mathml formulas
                                                                                               extended_valid_elements: '*[.*]',
                                                                                               // We recommend to set 'draggable_modal' to true to avoid overlapping issues
                                                                                               // with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
                                                                                               // @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
                                                                                               draggable_modal: true,
                                                                                               plugins: ['image', 'media'],
                                                                                               toolbar: 'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',
                                                                                               // language: 'fr_FR',
                                                                                               // You could set a different language for MathType editor:
                                                                                               // mathTypeParameters: {
                                                                                               // editorParameters: { language: 'de' },
                                                                                               // },
                                                                                              });

                      Caution

                      For Tinymce versions 6.x.x, the extended_valid_elements option is mandatory for the proper operation.

                      // This option allows us to introduce mathml formulas
                                                                                                                      extended_valid_elements: '*[.*]',
                       
                       
                       

                      React

                      Requirements:

                      • npm (v6.13.4)

                      Steps:

                      1. Run the following through the terminal.

                      Note

                      Notice that $APP_NAME needs to be replaced by the name that you choose.

                      create-react-app $APP_NAME cd $APP_NAME 
                                                                                                              npm install --save @tinymce/tinymce-react 
                                                                                                              npm install tinymce 
                                                                                                              npm install @wiris/mathtype-tinymce6 
                                                                                                              npm install jquery --save
                       

                      2. Replace all the content in src/index.js by:

                       // Default create-react-app imports
                                                                                               import React from 'react';
                                                                                               import ReactDOM from 'react-dom';
                                                                                               import './index.css';
                                                                                               import reportWebVitals from './reportWebVitals';
                                                                                               // Import the react editor TinyMCE component.
                                                                                               import { Editor } from '@tinymce/tinymce-react';
                                                                                               // Add jquery.
                                                                                               import $ from 'jquery';
                                                                                               // Load wiris formula render script.
                                                                                               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);
                                                                                               // This needs to be included before the '@wiris/mathtype-tinymce6' is loaded synchronously
                                                                                               window.$ = $;
                                                                                               window.tinymce = require('tinymce'); // Expose the TinyMCE to the window.
                                                                                               // Load wiris plugin synchronously.
                                                                                               require('@wiris/mathtype-tinymce6');
                                                                                               // Set the initial editor content
                                                                                               const content = '<p class="text"> Double click on the following formula to edit it.</p><p style="text-align:center;"><math><mi>z</mi><mo>=</mo><mfrac><mrow><mo>-</mo><mi>b</mi><mo>±</mo><msqrt><msup><mi>b</mi><mn>3</mn></msup><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></math></p>';
                                                                                               // Init the editor and define its options
                                                                                               const options = {
                                                                                               height: 500,
                                                                                               menubar: false,
                                                                                               // Add wiris plugin
                                                                                               external_plugins: {
                                                                                               'tiny_mce_wiris' : `${window.location.href}/node_modules/@wiris/mathtype-tinymce6/plugin.min.js`
                                                                                               },
                                                                                               plugins: [
                                                                                               'advlist autolink lists link image charmap print preview anchor',
                                                                                               'searchreplace visualblocks code fullscreen',
                                                                                               'insertdatetime media table paste code help wordcount '
                                                                                               ],
                                                                                               toolbar: [
                                                                                               ' bold italic |' +
                                                                                               'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry '
                                                                                               ],
                                                                                               htmlAllowedTags: ['.*'],
                                                                                               htmlAllowedAttrs: ['.*'],
                                                                                               extended_valid_elements: '*[.*]',
                                                                                               };
                                                                                               /* Create a component to be rendered later.
                                                                                               This is important to remove complexity from the reactDom.render
                                                                                               and to be able to add other functionality. */
                                                                                               class EditorTiny extends React.Component {
                                                                                               render() {
                                                                                               return (
                                                                                               <Editor init ={ options } initialValue = { content } />
                                                                                               );
                                                                                               }
                                                                                               }
                                                                                               ReactDOM.render(<EditorTiny />, document.getElementById('root'));
                                                                                               // If you want your app to work offline and load faster, you can change
                                                                                               // unregister() to register() below. Note this comes with some pitfalls.
                                                                                               // Learn more about service workers: https://bit.ly/CRA-PWA
                                                                                               reportWebVitals();

                      3. Add the following script on the head of your HTML file:

                       <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

                      4. Finally, you are ready to run the development server through the specified command

                      npm run start
                       
                       

                      Angular

                      Requirements:

                      • npm (v6.13.4)

                      Steps:

                      1. Run the following through the terminal.

                      Note

                      Notice that $APP_NAME needs to be replaced by the name that you choose.

                      ng new $APP_NAME
                                                                                                                      cd $APP_NAME
                                                                                                                      npm install --save @tinymce/tinymce-angular
                                                                                                                      npm install --save tinymce
                                                                                                                      npm install --save @wiris/mathtype-tinymce6
                       

                      2. Edit src/app/app.module.ts as shown below:

                       // Import the tinymce options
                                                                                               import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
                                                                                               // Expose tinymce instance to the window
                                                                                               declare const require: any;
                                                                                               (window as any).tinymce = require('tinymce');
                                                                                               // import synchronous mathtype-tinymce5 package
                                                                                               require('@wiris/mathtype-tinymce5')
                                                                                               ...
                                                                                               @NgModule({
                                                                                               ...
                                                                                               imports: [... EditorModule ... ],
                                                                                               providers: [ { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' } ],
                                                                                               ...
                                                                                               })

                      3. Add the following in the .angular.json.

                       "assets": [
                                                                                               ...
                                                                                               { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
                                                                                               ...
                                                                                               ]
                                                                                               ...
                                                                                               "scripts": [
                                                                                               ...
                                                                                               "node_modules/tinymce/tinymce.min.js"
                                                                                               ...
                                                                                               ]

                      4. Replace the content of the src/app/app.component.ts file with the code below.

                       import { Component } from '@angular/core';
                                                                                               // Load WIRISplugins.js dynamically
                                                                                               const jsDemoImagesTransform = document.createElement('script');
                                                                                               jsDemoImagesTransform.type = 'text/javascript';
                                                                                               jsDemoImagesTransform.src = 'https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image';
                                                                                               // Load generated scripts.
                                                                                               document.head.appendChild(jsDemoImagesTransform);
                                                                                               @Component({
                                                                                               selector: 'app-root',
                                                                                               templateUrl: './app.component.html',
                                                                                               styleUrls: ['./app.component.css']
                                                                                               })
                                                                                               export class AppComponent {
                                                                                               title = 'tinymce6';
                                                                                               // Editor initial content with a mathml formula.
                                                                                               public content: string = '<p class="text"> Double click on the following formula to edit it.</p><p style="text-align:center;"><math><mi>z</mi><mo>=</mo><mfrac><mrow><mo>-</mo><mi>b</mi><mo>±</mo><msqrt><msup><mi>b</mi><mn>3</mn></msup><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></math></p>';
                                                                                               // Define the initial options of the editor
                                                                                               public options: Object = {
                                                                                               base_url: '/tinymce', // Root for resources
                                                                                               suffix: '.min', // Suffix to use when loading resources
                                                                                               // Add wiris plugin
                                                                                               external_plugins: {
                                                                                               'tiny_mce_wiris' : `${window.location.href}/node_modules/@wiris/mathtype-tinymce6/plugin.min.js`
                                                                                               },
                                                                                               htmlAllowedTags: ['.*'],
                                                                                               htmlAllowedAttrs: ['.*'],
                                                                                               // This option allows us to introduce mathml formulas
                                                                                               extended_valid_elements: '*[.*]',
                                                                                               // We recommend to set 'draggable_modal' to true to avoid overlapping issues
                                                                                               // with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
                                                                                               // @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
                                                                                               draggable_modal: true,
                                                                                               plugins: ['image', 'media'],
                                                                                               toolbar: 'undo redo | styleselect | bold italic | image media | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',
                                                                                               // language: 'fr_FR',
                                                                                               // You could set a different language for MathType editor:
                                                                                               // mathTypeParameters: {
                                                                                               // editorParameters: { language: 'de' },
                                                                                               // },
                                                                                               };
                                                                                               }

                      Note

                      Notice that the content can be empty or set as you prefer in the component.

                       

                      5.Edit src/app/app.component.html and replace its contents with:

                       <h1>TinyMCE 6 Angular Demo</h1>
                                                                                               <editor
                                                                                               id="editor"
                                                                                               [init]="options"
                                                                                               [initialValue]="content"
                                                                                               ></editor>

                      6. Finally, you are ready to run the development server through the specified command.

                      ng serve
                       
                       

                      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. Click on the technology you are using to see full instructions.

                      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 TinyMCE configuration:
                       tinymce.init({
                                       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 the following attribute to TinyMCE configuration:
                      tinymce.init({
                                       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 and TinyMCE. Using this option you do not need to install any component on your servers. You only need to add the following line to your TinyMCE configuration.

                      Frontend + On-Premises Services

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

                      1. Copy files and configuration

                      Unzip the tinyMCE MathType integration and copy the tiny_mce_wiris directory into your tinyMCE plugins directory. For example, you will have tiny_mce/plugins/tiny_mce_wiris. The name of the MathType integration directory must be tiny_mce_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 Servlet

                      • 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 tiny_mce/plugins/tiny_mce_wiris/configuration.ini to set your own values.This table specifies all possible parameters.

                      For versions older than 3.50.0 it is essential to set the value of the parameters wiriscachedirectory and wirisformuladirectory.

                       
                       

                      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

                      Note: This step may be specific to your platform (i.e: ILIAS).

                      You must activate tiny_mce_wiris on your tinyMCE integration list (see tinyMCE documentation). You can also include these buttons on your tinyMCE button list:

                      tiny_mce_wiris_formulaEditor

                      tiny_mce_wiris_formulaEditorChemistry

                      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. Custom MathType properties

                      The parameters used when creating formulas (font color, background color, transparency...) are defined in the configuration.ini file. However, it is possible, in specific cases, that these values must be overriden at runtime or that there must be two editors with different configurations running at once.

                      To solve the problem, it offers the possibility to specify settings for the integration in the TinyMCE initialization.

                      The following snippet of Javascript code shows the available parameters and how to set their values:

                      tinyMCE.init({
                                   ...
                                   wirisimagebgcolor: '#FFFFFF',
                                   wirisimagesymbolcolor: '#000000',
                                   wiristransparency: 'true',
                                   wirisimagefontsize: '16',
                                   wirisimagenumbercolor: '#000000',
                                   wirisimageidentcolor: '#000000',
                                   wirisformulaeditorlang: 'es'
                                  });
                                  

                      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 API documentation

                      MathType for TinyMCE

                      Before you continue reading Demos and integration downloads Collaborative mode Requirements Frontend + Cloud Services npm installation steps Note Caution Note Note Note 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 3. WIRISplugins.js 4. Testing 5. Custom MathType properties 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 Settings
                      • Cookie Policy
                      • Terms of Use
                      • Privacy Policy / GDPR
                      • Student Data Privacy
                      • Compliance
                      • Powered by Helpjuice
                      Expand