MathType for TinyMCE

Install the MathType for Tinymce npm module:

npm install @wiris/mathtype-tinymce<VERSION_X>

Where <VERSION_X> can be 4 .x.x or 5.x.x or >= 6.1.0

Load the module into your project:

<script src="node_modules/@wiris/mathtype-tinymce<VERSION_X>/wiris.js"></script>

Update TinyMCE configuration options with our recommended settings:

// Set up the editor.
    └───@wiris/mathtype-tinymceX
tinymce.init({
  selector: '#editor',
  external_plugins: {
    tiny_mce_wiris: 'node_modules/@wiris/mathtype-tinymce<VERSION_X>/plugin.min.js',
  },

  // This option allows us to introduce mathml formulas
  extended_valid_elements: '*[.*]',
  // We recommend to set 'draggable_modal' to true to avoid overlapping issues
  // with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
  // @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
  draggable_modal: true,
  plugins: ['image', 'media'],
  toolbar: 'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',

  // language: 'fr_FR',
  // You could set a different language for MathType editor:
  // mathTypeParameters: {
  //   editorParameters: { language: 'de' },
  // },
});

// This option allows us to introduce mathml formulas
extended_valid_elements: '*[.*]',

Run the following through the terminal.

ng new $APP_NAME
cd $APP_NAME
npm install --save @tinymce/tinymce-angular
npm install --save tinymce
npm install --save @wiris/mathtype-tinymce6

Edit src/app/app.module.ts as shown below:

   // Import the tinymce options
   import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
   
   // Expose tinymce instance to the window
   declare const require: any;
   (window as any).tinymce = require('tinymce');
   
   // import synchronous mathtype-tinymce5 package
   require('@wiris/mathtype-tinymce5')

   ...
   
   @NgModule({
       ...
       imports: [... EditorModule ... ],
       providers: [ { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' } ],
       ...
   })

Add the following in the .angular.json.

   "assets": [
       ...
       { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
       ...
   ]
   ...
   "scripts": [
       ...
       "node_modules/tinymce/tinymce.min.js"
       ...
   ]

Replace the content of the src/app/app.component.ts file with the code below.

   import { Component } from '@angular/core';
   // Load WIRISplugins.js dynamically
   const jsDemoImagesTransform = document.createElement('script');
   jsDemoImagesTransform.type = 'text/javascript';
   jsDemoImagesTransform.src = 'https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image';
   // Load generated scripts.
   document.head.appendChild(jsDemoImagesTransform);
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   
   export class AppComponent {
       title = 'tinymce6';
       
       // Editor initial content with a mathml formula.
       public content: string = '<p class="text"> Double click on the following formula to edit it.</p><p style="text-align:center;"><math><mi>z</mi><mo>=</mo><mfrac><mrow><mo>-</mo><mi>b</mi><mo>±</mo><msqrt><msup><mi>b</mi><mn>3</mn></msup><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></math></p>';
       // Define the initial options of the editor
       public options: Object = {
           base_url: '/tinymce', // Root for resources
           suffix: '.min',        // Suffix to use when loading resources
           
           // Add wiris plugin
           external_plugins: {
               'tiny_mce_wiris' : `${window.location.href}/node_modules/@wiris/mathtype-tinymce6/plugin.min.js`
           },
           htmlAllowedTags:  ['.*'],
           htmlAllowedAttrs: ['.*'],
           // This option allows us to introduce mathml formulas
  extended_valid_elements: '*[.*]',
           // We recommend to set 'draggable_modal' to true to avoid overlapping issues
           // with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
           // @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
           draggable_modal: true,
           plugins: ['image', 'media'],
           toolbar: 'undo redo | styleselect | bold italic | image media | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',
           // language: 'fr_FR',
           // You could set a different language for MathType editor:
           // mathTypeParameters: {
           //   editorParameters: { language: 'de' },
           // },
       };
   }

Edit src/app/app.component.html and replace its contents with:

 <h1>TinyMCE 6 Angular Demo</h1>
   <editor
   id="editor"
   [init]="options"
   [initialValue]="content"
   ></editor>

Finally, you are ready to run the development server through the specified command.

ng serve