Use MathType with Froala in Angular

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

Before you begin

Requirements

• An Angular application
• Node.js and npm
• A valid MathType license

Applies to

MathType for HTML editors · Froala · Angular

Steps

Create or open your Angular project

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

ng new $APP_NAME
cd $APP_NAME

Install Froala, the Angular integration, and MathType

Install the required packages for the editor and MathType integration.

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

Add Froala styles

Open angular.json and add the Froala styles inside styles.

"styles": [
  "src/styles.css",
  "./node_modules/froala-editor/css/froala_editor.pkgd.min.css",
  "./node_modules/froala-editor/css/froala_style.min.css"
]

Create a TypeScript declaration file

Create the following file:

src/types.d.ts

Then add:

declare module '@wiris/mathtype-froala3/wiris.js';

This allows TypeScript to recognize the MathType integration script.

Configure the Angular component

Open src/app/app.ts and configure the Froala editor.

Import Angular, Froala, and the Froala Angular modules

import { CommonModule } from '@angular/common';
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

Import Froala and its plugins

import FroalaEditor from 'froala-editor';
import 'froala-editor/js/plugins.pkgd.min.js';

The Froala plugin package is required for toolbar buttons, including image insertion, links, and MathType integration.

Expose Froala globally

(window as any).FroalaEditor = FroalaEditor;

MathType needs access to the Froala editor instance to register its toolbar buttons.

Define the component

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FroalaEditorModule, FroalaViewModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App implements OnInit {
  public editorReady = false;

  constructor(private cdr: ChangeDetectorRef) {}
}

The editorReady property is used to render the Froala editor only after MathType has been loaded.

Configure the toolbar

public toolbarButtons = [
  'undo',
  'redo',
  '|',
  'bold',
  'italic',
  'underline',
  '|',
  'insertImage',
  'insertLink',
  'wirisEditor',
  'wirisChemistry'
];

The wirisEditor and wirisChemistry buttons open MathType and ChemType.

Configure Froala options

public options: Object = {
  toolbarButtons: this.toolbarButtons,

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

The MathML-related settings help preserve formula content when formulas are inserted, edited, or reloaded from stored content.

Load MathType before rendering the editor

async ngOnInit() {
  await import('@wiris/mathtype-froala3/wiris.js');

  this.editorReady = true;
  this.cdr.detectChanges();
}

MathType is loaded before the editor is rendered so it can register the wirisEditor and wirisChemistry toolbar buttons.

Render the editor

Open src/app/app.html and replace its contents with:

<h1>Froala Angular Demo</h1>

<div
  *ngIf="editorReady"
  id="editor"
  [froalaEditor]="options">
</div>

Start the development server

Run the development server through the specified command.

ng serve

Full example

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

import { CommonModule } from '@angular/common';
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

import FroalaEditor from 'froala-editor';
import 'froala-editor/js/plugins.pkgd.min.js';

(window as any).FroalaEditor = FroalaEditor;

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FroalaEditorModule, FroalaViewModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App implements OnInit {
  public editorReady = false;

  constructor(private cdr: ChangeDetectorRef) {}

  public toolbarButtons = [
    'undo',
    'redo',
    '|',
    'bold',
    'italic',
    'underline',
    '|',
    'insertImage',
    'insertLink',
    'wirisEditor',
    'wirisChemistry'
  ];

  public options: Object = {
    toolbarButtons: this.toolbarButtons,

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

  async ngOnInit() {
    await import('@wiris/mathtype-froala3/wiris.js');

    this.editorReady = true;
    this.cdr.detectChanges();
  }
}

Verify it worked

• The Froala editor loads in your Angular 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

Ensure MathType is loaded before rendering the editor.

await import('@wiris/mathtype-froala3/wiris.js');

The editor should be rendered only after editorReady is set to true.

Froala plugins are missing

Ensure the following import is included:

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

Without it, toolbar buttons such as insertImage, insertLink, wirisEditor, or wirisChemistry may not appear.

TypeScript cannot find the MathType module

Ensure you created src/types.d.ts with:

declare module '@wiris/mathtype-froala3/wiris.js';

MathML is removed from the editor

Ensure the following settings are included in the Froala configuration.

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

Related

• MathType integration architecture.
• MathType integrations deployment models.