Formula Editor

Release 2.16.0 and above.

A formula editor plugin that can insert formulas/chemical formulas and edit their properties.

Formula editor example

Used Module

The Synap Editor Formula Editor plugin uses a commercial module called MathType.

If you want to use it, please contact us through the page below.

How to Use

Loading Plugin Files

<!-- You need to add the MathType library to use it. (https://www.npmjs.com/package/@wiris/mathtype-generic#documentation) -->
<script src="url of mathtype-generic/wirisplugin-generic.js"></script>

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of mathType.min.js"></script>

How to Download the wirisplugin-generic.js File

<!-- The wirisplugin-generic.js file is provided when you install the MathType Generic Integration package. -->
npm install @wiris/mathtype-generic@7.31.0

<!-- File location after installation -->
node_modules/@wiris/mathtype-generic/wirisplugin-generic.js

You can copy this file to a path within your project and use it.

Adding Buttons to the Toolbar

You can add formula edit and chemical formula edit buttons to the toolbar area or the menu area.

Add to Toolbar

Math button on toolbar

// synapeditor.config.js
//...
'editor.toolbar': [
    // Formula edit buttons
    'mathType.math', 'mathType.chem'
    //...
],
// ...

Configure the Plugin

MathType Settings

Set the properties to use when initializing the window.WirisPlugin.GenericIntegration object.

// synapeditor.config.js
'mathType.config': {
    'properties': {
        'configurationService': '/pluginwiris_engine/app/configurationjs'
    }
}

MathType API Settings

Release 3.1.2501 and above, Release 2.19.2501 and above.

You can use the MathType API to display formulas. If the API is not set, formulas are displayed as images converted by the internal module.

For more details, refer to the document below:

  • API Service Configuration Guide
// synapeditor.config.js
'mathType.config': {
    'mathMlToSvgUrl': '/render?format=svg&mml={mathML}'
}

MathType Saved Value Settings

Release 3.3.0 and above, Release 2.21.0 and above.

You can express the result edited in MathType editor as either an image or a math tag (<math>).

Saved Value Description

<table> <thead> <tr><th>Value</th><th>Description</th><th>Note</th></tr> </thead> <tbody> <tr> <td><code>auto</code> (default)</td> <td>

Saves the result according to the format of the original data when editing the formula.

Newly added → <img>

<img> → <img>

<math> → <math>

</td> <td></td> </tr> <tr> <td><code>image</code></td> <td>

Saves the result as <img> when editing the formula.

Newly added → <img>

<img> → <img>

<math> → <img>

</td> <td>

Display method is consistent across browsers.

Font style editing is only possible in MathType.

</td> </tr> <tr> <td><code>mathML</code></td> <td>

Saves the result as <math> when editing the formula.

Newly added → <math>

<img> → <math>

<math> → <math>

</td> <td>

Font style editing is possible within the editor.

Rendering method and supported range vary by browser, so the display may differ.

</td> </tr> </tbody> </table> 
//...
'mathType.config': {
    'resultType': 'auto' // 'auto'(default) | 'image' | 'mathML'
}