# Full MathML mode - WIRISplugins.js

## Add a <script> to <head>

Because you can edit more formulas with MathType than the native MathML capabilities of some current browsers, you need to include a JavaScript command in the header of your page to convert the MathML into quality formula images:

<script src="<your-plugin>/integration/WIRISplugins.js?viewer=image"></script>

For Java plugins:

<script src="<pluginwiris-engine-path>/app/WIRISplugins.js?viewer=image"></script>

Note: From versions 3.50.0 to 3.52.x this file location was `<your-plugin>/core/WIRISplugins.js`

Another benefit of the above script is that provides accessibility to the formulas because it adds a textual representation of the formula in the ALT attribute of the image.

### Image mode / Upgrading from versions older than 3.5x.x

In versions older than 3.5x.x the default mode was the image mode (formulas were saved as img tags). You can enable the image mode in newer versions if you need it adding this variable in your `configuration.ini`

file:

`wiriseditorsavemode=image`

`wirisimageformat=png`

If you use the image mode in versions higher than 4.0 you should disable the performance mode:
`wirispluginperformance=false`

Please note that you only need to include `WIRISplugin.js`

script if you use the full MathML mode.

## Enable full MathML mode

### For integration versions 3.50 and higher

Full MathML mode is the default mode for 3.50.x and higher plugins. You don't need any additional configuration. You only need to include the `WIRISplugins.js`

script.

### For integration versions previous to 3.50

To enable full MathML mode, edit the following file according to your Wiris integration:

Integration | File |
---|---|

CKEditor | ckeditor/plugins/ckeditor_wiris/plugin.js |

FCKEditor | fckeditor/editor/plugins/fckeditor_wiris/fckplugin.js |

Radeditor | radeditor_wiris/radeditor.js |

TinyMCE | tiny_mce/plugins/tiny_mce_wiris/editor_plugin.js |

Xinha | xinha/plugins/xinha_wiris/xinha_wiris.js |

Generic | pluginwiris/integration/integration.js |

And set the variable `_wrs_conf_saveMode`

with value "xml". Then, do not forget to include the `WIRISplugins.js`

script.

## WIRISplugins.js parameters

Note. This script only works for MathType Integrations from version 3.50 and higher.

The `WIRISplugins.js`

is the responsible of converting the MathML into images. It admits the following parameters:

Parameter name | Description | Values | Default value |
---|---|---|---|

viewer | Sets the viewer mode for the MathML. "image” means display as image. | image, none | none |

lang | Sets the language for the accesible text. "inherit" means that the language is selected from the lang attribute of the top html tag. | en, es, inherit | inherit |

dpi | Sets the dpi of the images. Used to get better quality for printing but formulas might appear blur in the screen. | number | 96 |

async | Specifies if the viewer should render the formulas asynchronously | true/false | false |

## MathML to images asynchronously

You can apply WIRISplugins script to a particular DOM element:

com.wiris.js.JsPluginViewer.parseElement(domElement, true, function(){})

## Convert MathType <img> tags to MathML

All MathType formulas contain MathML. Hence there's really no *conversion* involved from images into MathML, but there is a way to retrieve the MathML that's already there. As an example, consider this `img`

tag from a MathType formula published to WordPress. The code from other integrations will vary, but all will contain the attributes mentioned below. This is the formula :

<html><math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle mathsize="18px"><mi>f</mi><mfenced><mi>x</mi></mfenced><mo>=</mo><msup><mi>x</mi><mn>2</mn></msup></mstyle></math></html>

To migrate your content from `img`

tags to MathML, follow these steps:

- Find all your
`img`

tags with`Wirisformula`

class (i.e. with a regular expression). - Use the value of their
`data-mathml`

attribute and make these replacements:

Replace | With |
|||

« | (#AB) | < | (#3C) | |

» | (#BB) | > | (#3E) | |

§ | (#A7) | & | (#26) | |

¨ | (#A8) | " | (#22) | |

` | (#60) | ' | (#27) |

- Replace the
`img`

tags with the re-encoded MathML from step 2. You can see in the`img`

tag above, MathType has used`«mi»`

,`mathsize=¨18px¨`

, etc., so that's why it's necessary change these back to`<mi>`

,`mathsize="18px"`

, etc.