Use MathType with Froala in React

Use this guide when you are integrating Froala in a React application and want to enable MathType for formula editing.

Before you begin

Requirements

• A React application
• Node.js and npm
• A valid MathType license

Applies to

MathType for HTML editors · Froala · React

Steps

Create or open your React project

If you already have a React application, use that project. Otherwise, create a new one and move into its directory.

npx create-react-app $APP_NAME
cd $APP_NAME

Install Froala, the React integration, MathType, and jQuery

Install the required packages for the editor and MathType integration.

npm install react-froala-wysiwyg --save
npm install froala-editor --save
npm install @wiris/mathtype-froala3 --save
npm install jquery --save

Load Froala styles and plugins

Open src/index.js and add the Froala styles and plugin package.

import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/js/plugins.pkgd.min.js';

Expose Froala and jQuery globally

Add the following code in src/index.js, before initializing the editor:

import $ from 'jquery';

window.$ = $;
window.FroalaEditor = require('froala-editor');

Then load the MathType plugin:

require('@wiris/mathtype-froala3');

Configure Froala with MathType

Define the minimal editor configuration:

const froalaConfig = {
  toolbarButtons: [
    'undo',
    'redo',
    '|',
    'bold',
    'italic',
    'underline',
    '|',
    'insertImage',
    'insertLink',
    'wirisEditor',
    'wirisChemistry'
  ],
  imageEditButtons: ['wirisEditor', 'wirisChemistry']
  
  htmlAllowedTags: ['.*'],
  htmlAllowedAttrs: ['.*'],
  htmlAllowedEmptyTags: ['mprescripts', 'none']
};

Render the editor

Import the Froala React component and render it with your configuration.

import FroalaEditorComponent from 'react-froala-wysiwyg';

function EditorFroala() {
  return <FroalaEditorComponent tag="div" config={froalaConfig} />;
}

Start the development server

Run the development server through the specified command

npm run start

Full example

If you want to test the full setup directly, your src/index.js can look like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/js/plugins.pkgd.min.js';

import FroalaEditorComponent from 'react-froala-wysiwyg';
import $ from 'jquery';

window.$ = $;
window.FroalaEditor = require('froala-editor');

require('@wiris/mathtype-froala3');

const froalaConfig = {
  toolbarButtons: [
    'undo',
    'redo',
    '|',
    'bold',
    'italic',
    'underline',
    '|',
    'insertImage',
    'insertLink',
    'wirisEditor',
    'wirisChemistry'
  ],
  imageEditButtons: ['wirisEditor', 'wirisChemistry'],

  htmlAllowedTags: ['.*'],
  htmlAllowedAttrs: ['.*'],
  htmlAllowedEmptyTags: ['mprescripts', 'none']
};

function EditorFroala() {
  return <FroalaEditorComponent tag="div" config={froalaConfig} />;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<EditorFroala />);

Verify it worked

• The Froala editor loads in your React application.
• MathType and ChemType buttons appear in the Froala toolbar.
• You can insert and edit a formula in the editor.

Options and variations

Advanced configuration

If you need advanced configuration, you can customize the editor's behaviour (such as the toolbar, language, or editor settings). See MathType configuration options.

Backend services

If you need backend services (Java or PHP), some deployments require additional services for formula rendering and storage. See MathType integrations deployment models.

Common errors

MathType buttons do not appear

Check that @wiris/mathtype-froala3 is loaded after Froala is exposed globally.

Froala loads, but MathType does not open

Verify that window.FroalaEditor is defined before loading the MathType integration.

MathML is removed from the editor

Ensure the following settings are included in the Froala configuration:

htmlAllowedTags: ['.*'],
htmlAllowedAttrs: ['.*'],
htmlAllowedEmptyTags: ['mprescripts', 'none']

Formulas from initial content are not rendered correctly

If your editor loads initial content that already contains formulas, you may need to parse the content when Froala initializes. Use WirisPlugin.Parser.initParse(...) for this React-specific case.

Related

• MathType integration architecture.
• MathType integrations deployment models.