MathType for TinyMCE
Demos and integration downloads
Requirements
TinyMCE 2.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.
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.
ASP.NET
Create an application through your IIS control panel with root directory at
tiny_mce/plugins/tiny_mce_wiris
. For versions older than 3.50.0 you need to create the application at/tiny_mce/plugins/tiny_mce_wiris/integration
. If, given your project requirements or architecture, you need to have only one application move/tiny_mce_wiris/bin
contents to the/bin
directory of your project and copy theWeb.config
configuration to your projectWeb.config
. If you use .NET 4.0 or above use the values ofWeb.config4.0
.Give write permissions to
tiny_mce/plugins/
,tiny_mce_wiris/cache
andtiny_mce/plugins/tiny_mce_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.
Configuraion
Edit tiny_mce/plugins/tiny_mce_wiris/configuration.ini
to set your own values.This table specifies all possible parameters.
Java Servlet
Install the pluginwiris_engine.war in your Java web applications server. For example, tomcat.
Give write permissions to
pluginwiris_engine/cache
and topluginwiris_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.
Ruby on Rails
Install wirispluginengine gem manually.
Specify
wirispluginengine
gem inside your application's Gemfile.Mount
Wirispluginengine
engine into your application'sconfig/routes.rb
file, adding the following line:mount Wirispluginengine::Engine => 'wirispluginengine
'Give write permissions to
wirispluginengine-X.Y.Z/cache
and towirispluginengine-X.Y.Z/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 WEB-INF/pluginwiris/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 tockeditor/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.
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.
External integration for TinyMCE
external_plugins: { tiny_mce_wiris: 'https://www.wiris.net/demo/plugins/tiny_mce/plugin.js' }
To Include MathType buttons in your TinyMCE button list, the button keys are the following:
tiny_mce_wiris_formulaEditor
tiny_mce_wiris_formulaEditorChemistry