Use MathType with TinyMCE in Angular

Use this guide when you are integrating TinyMCE 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 · TinyMCE · 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 TinyMCE, the Angular integration, and MathType

Install the required packages for the editor and MathType integration.

npm install --save @tinymce/tinymce-angular
npm install --save tinymce
npm install --save @wiris/mathtype-tinymce7

Configure TinyMCE assets

Open angular.json and add the following entry inside assets:

{
  "glob": "**/*",
  "input": "node_modules/tinymce",
  "output": "/tinymce/"
}

This makes TinyMCE assets available from /tinymce.

Load the MathType rendering script

Open src/app/app.ts and add the following:

const jsDemoImagesTransform = document.createElement('script');
jsDemoImagesTransform.type = 'text/javascript';
jsDemoImagesTransform.src =
  'https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image';
document.head.appendChild(jsDemoImagesTransform);

Configure TinyMCE and MathType in the Angular component

Open src/app/app.ts and replace its contents with the required TinyMCE and MathType setup. Import TinyMCE, the Angular editor component, TinyMCE assets, and the MathType package:

import { Component } from '@angular/core';
import { EditorComponent } from '@tinymce/tinymce-angular';

import 'tinymce/tinymce';
import 'tinymce/models/dom/model';
import 'tinymce/themes/silver';
import 'tinymce/icons/default';

import 'tinymce/plugins/image';
import 'tinymce/plugins/media';

import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

import '@wiris/mathtype-tinymce7';

Then define the editor configuration:

public options = {
  base_url: '/tinymce',
  suffix: '.min',
  skin: false,
  content_css: false,
  external_plugins: {
    tiny_mce_wiris: `${window.location.href}/node_modules/@wiris/mathtype-tinymce7/plugin.min.js`
  },
  extended_valid_elements: '*[.*]',
  draggable_modal: true,
  plugins: ['image', 'media'],
  toolbar:
    'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry'
};

Render the editor

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

<editor
  id="editor"
  [init]="options">
</editor>

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 { Component } from '@angular/core';
import { EditorComponent } from '@tinymce/tinymce-angular';

import 'tinymce/tinymce';
import 'tinymce/models/dom/model';
import 'tinymce/themes/silver';
import 'tinymce/icons/default';

import 'tinymce/plugins/image';
import 'tinymce/plugins/media';

import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

import '@wiris/mathtype-tinymce7';

const jsDemoImagesTransform = document.createElement('script');
jsDemoImagesTransform.type = 'text/javascript';
jsDemoImagesTransform.src =
  'https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image';
document.head.appendChild(jsDemoImagesTransform);

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [EditorComponent],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  public options = {
    base_url: '/tinymce',
    suffix: '.min',
    skin: false,
    content_css: false,
    external_plugins: {
      tiny_mce_wiris: `${window.location.href}/node_modules/@wiris/mathtype-tinymce7/plugin.min.js`
    },
    extended_valid_elements: '*[.*]',
    draggable_modal: true,
    plugins: ['image', 'media'],
    toolbar:
      'undo redo | styleselect | bold italic | image media | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry'
  };
}

Verify it worked

• The TinyMCE editor loads in your Angular application.
• MathType and ChemType buttons appear in the TinyMCE 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 the external_plugins path and confirm that the plugin file is reachable from the browser. The plugin may not be loaded correctly.

Failed to load plugin: tiny_mce_wiris

Ensure the URL used in external_plugins points to a valid file. The development server may not expose node_modules by default.

Formulas are not rendered correctly

Check that the WIRISplugins.js script is loaded in the page. Without it, formulas may not display properly.

MathML is removed from the editor

Ensure extended_valid_elements: '*[.*]' is included in the editor configuration. TinyMCE may otherwise filter MathML content.

Related

• MathType integration architecture.
• MathType integrations deployment models.