Use MathType with CKEditor 5 in React

Use this guide when you are integrating CKEditor 5 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 · CKEditor 5 · React

Steps

Create or open your React project

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

npm create vite@latest $APP_NAME

When prompted, select:

• Framework: React.
• Variant: JavaScript.

Then move into the project directory and install the project dependencies.

cd $APP_NAME
npm install

Install CKEditor 5, the React integration, and MathType

Install the required packages.

npm install ckeditor5 
npm install @ckeditor/ckeditor5-react 
npm install @wiris/mathtype-ckeditor5

Import CKEditor 5 and MathType

Open src/App.jsx and import CKEditor 5, the React integration, and MathType.

import { CKEditor } from '@ckeditor/ckeditor5-react';

import { 
    ClassicEditor, 
    Essentials, 
    Paragraph, 
    Bold, 
    Italic 
} from 'ckeditor5'; 

import 'ckeditor5/ckeditor5.css'; 

import MathType from '@wiris/mathtype-ckeditor5/dist/index.js'; 
import '@wiris/mathtype-ckeditor5/dist/index.css';

Configure CKEditor 5

Create a configuration object and add the MathType plugin and toolbar buttons.

const editorConfig = { 
    plugins: [ 
        Essentials, 
        Paragraph, 
        Bold, 
        Italic, 
        MathType ], 
        
    toolbar: [ 
        'bold', 
        'italic', 
        'MathType', 
        'ChemType' 
    ] 
};

Render the editor

Replace the default React component with a CKEditor component.

function App() { 
  return (
    <CKEditor 
      editor={ClassicEditor} 
      data="<p>Hello CKEditor 5!</p>" 
      config={editorConfig} 
    />
  ); 
} 

export default App;

Start the development server

Run the development server.

npm run dev

Full example

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

import { CKEditor } from '@ckeditor/ckeditor5-react';

import {
  ClassicEditor,
  Essentials,
  Paragraph,
  Bold,
  Italic
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

import MathType from '@wiris/mathtype-ckeditor5/dist/index.js';
import '@wiris/mathtype-ckeditor5/dist/index.css';

const editorConfig = {

  plugins: [
    Essentials,
    Paragraph,
    Bold,
    Italic,
    MathType
  ],

  toolbar: [
    'bold',
    'italic',
    'MathType',
    'ChemType'
  ]
};

function App() { 
  return (
    <CKEditor 
      editor={ClassicEditor} 
      data="<p>Hello CKEditor 5!</p>" 
      config={editorConfig} 
    />
  ); 
} 

export default App;

Verify it worked

• The CKEditor 5 editor loads in your React application.
• MathType and ChemType buttons appear in the CKEditor 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:

• The MathType plugin was added to the plugins configuration.
• The MathType and/or ChemType toolbar items were added to the toolbar configuration.

Failed to load the MathType plugin

Ensure that @wiris/mathtype-ckeditor5 is installed and that the import paths are correct.

Related

• MathType integration architecture.
• MathType integrations deployment models.