MathType for Froala

The following section describes the installation of MathType's integration for the current versions of Froala (v4 and v3): froala-editor@3.x.x to froala-editor@4.x.x

Note: that we support all non-deprecated Froala versions, however we have a specific integration for Froala version 2 which installation process differs a bit from the integration for Froala version 3 or higher. See the Froala 2 installation steps in the section below.

Frontend

You can install the integration's frontend either in a 'manual' generic fashion or using the Angular or ReactJS frameworks. See the sections below and follow the steps of the installation of your choice.

Generic Installation

Requirements:

  • npm (v6.13.4)

Steps:

1. Install the MathType for Froala npm module:

npm install @wiris/mathtype-froala3

2. Load the module into your project:

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

3. Update Froala configuration options:

// From Froala 'Get started' section https://froala.com/wysiwyg-editor/docs/overview/
new FroalaEditor('.selector', {
   // Add MathType and ChemType buttons to the toolbar and the image menu:
   toolbar: ['wirisEditor', 'wirisChemistry'], 
   imageEditButtons: ['wirisEditor', 'wirisChemistry'],
   // Allow all tags, in order to allow MathML:
   htmlAllowedTags:  ['.*'],
   htmlAllowedAttrs: ['.*'],
   // Allow empty tags on these next elements for proper formula rendering:
   htmlAllowedEmptyTags: ['mprescripts', 'none'],
   // In case you are using a different Froala editor language than default,
   // language: 'es',
   // You can choose the language for the MathType editor, too:
   // @see: https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/parameters#regional_properties
   // mathTypeParameters: {
   //   editorParameters: { language: 'es' },
   // },
}

Notice the example assumes this directory structure:

└───index.html
└───node_modules
    └───@wiris/mathtype-froala3

Angular Installation

Requirements:

  • npm (v6.13.4)
  • Angular (v11.2.10)

Steps:

1. Run the following through the terminal

Note: you can set the froala-editor and angular-froala-wysiwyg versions, as showed in the comment below, which lies between 3 and 4. In case the version is not specified, the latest stable version will be installed.
$ ng new $APP_NAME
# Notice that **$APP_NAME** needs to be replaced by the name that you choose.

$ cd $APP_NAME

$ npm install --save angular-froala-wysiwyg

$ npm install --save froala-editor
# npm install --save froala-editor@3.2.7
# Supports Froala V4 and V3

$ npm install --save @wiris/mathtype-froala3

2. Open the src/app/app.module.ts file and add:

// From Froala instructions.
// Import all Froala Editor plugins.
import "froala-editor/js/plugins.pkgd.min.js";
 
// Expose FroalaEditor instance to window.
declare const require: any;
(window as any).FroalaEditor = require("froala-editor");
require("@wiris/mathtype-froala3"); // Import WIRIS Mathtype formula editor.
 
// Import Angular plugin.
import {
  FroalaEditorModule,
  FroalaViewModule,
} from "angular-froala-wysiwyg";
 
...
 
@NgModule({
    ...
    imports: [... FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
    ...
})

3. Open .angular.json file and add:

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

4. Open src/app/app.component.ts and replace all with:

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 {
  // Set App Title.
  title = "Angular froala demo";
 
  // Initialize the editor content.
  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>&PlusMinus;</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>';
 
  // Set options for the editor.
  public options: Object = {
   // Define the toolbar options for the froala editor.
   toolbarButtons: [
     'undo',
     'redo',
     'bold',
     'italic',
     '|',
     'wirisEditor',
     'wirisChemistry',
     'insertImage'
   ],
   // Add [MW] uttons to the image editing popup Toolbar.
   imageEditButtons: [
     'wirisEditor',
     'wirisChemistry',
     'imageDisplay',
     'imageAlign',
     'imageInfo',
     'imageRemove'
   ],
   // Allow all the tags to understand the mathml
   htmlAllowedTags:  ['.*'],
   htmlAllowedAttrs: ['.*'],
   // List of tags that are not removed when they have no content inside
   // so that formulas renderize propertly
   htmlAllowedEmptyTags: ['mprescripts', 'none'],
   // In case you are using a different Froala editor language than default,
   // language: 'es',
   // You can choose the language for the MathType editor, too:
   // @see: https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/parameters#regional_properties
   // mathTypeParameters: {
   //   editorParameters: { language: 'es' },
   // },
  };
}
Note: the initial content in the editor can be empty or filled with the custom initial text you prefer.

5. Open src/app/app.component.html and replace all with:

<h1>Angular and Froala demo</h1>
<!-- Pass options and content to the component. -->
<div id="editor" [froalaEditor]="options" [(froalaModel)]="content"></div>

6. Finally, run the development server to initialize the Froala editor.

ng serve

ReactJS Installation

Requirements:

  • npm (v6.13.4)
  • create-react-app (v3.4.0)

Installation:

1. Run the following through the terminal

Note: you can set the froala-editor and angular-froala-wysiwyg versions, as showed in the comment below, which lies between 3 and 4. In case the version is not specified, the latest stable version will be installed.
$ create-react-app $APP_NAME
# Notice that **$APP_NAME** needs to be replaced by the name that you choose.

$ cd $APP_NAME

$ npm install react-froala-wysiwyg --save
# npm install react-froala-wysiwyg@3.2.7 --save
# Supports Froala V4 and V3

$ npm install --save @wiris/mathtype-froala3

$ npm install @wiris/mathtype-froala3 --save

$ npm install jquery --save

2. Replace all the content in src/index.js by:

// Load react default libraries.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
// Load Froala Editor scripts and styles.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditorComponent from 'react-froala-wysiwyg';
import 'froala-editor/js/plugins.pkgd.min.js';
// Import jQuery so we can expose Froala editor to the window.
import $ from 'jquery';
// Expose froala-editor to the window.
window.$ = $;
window.FroalaEditor = require('froala-editor');
// Load wiris mathtype-froala plugin.
require('@wiris/mathtype-froala3');
// 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);
// Define the toolbar & configuration options for the froala editor.
const toolbar = ['wirisEditor', 'wirisChemistry'];
const froalaConfig = {
    toolbarButtons: toolbar,
    // Add [MW] uttons to the image editing popup Toolbar.
    imageEditButtons: ['wirisEditor', 'wirisChemistry', 'imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove'],
     // Allow all the tags to understand the mathml
     htmlAllowedTags: ['.*'],
     htmlAllowedAttrs: ['.*'],
     // List of tags that are not removed when they have no content inside
     // so that formulas renderize propertly
     htmlAllowedEmptyTags: ['mprescripts', 'none'],
     // In case you are using a different Froala editor language than default,
     // language: 'es',
     // You can choose the language for the MathType editor, too:
     // @see: https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/parameters#regional_properties
     // mathTypeParameters: {
     //   editorParameters: { language: 'es' },
     // },
     // Execute on initialized editor.
     events: {
         initialized() {
         // Since Froala 3.1.1 version, initialization events need to be called manually for the React component.
         // Parse the initial content set on the editor through html to render it
         const contentRendered = WirisPlugin.Parser.initParse(this.html.get(true));
         this.html.set(contentRendered);
         },
     },
 };
 
 // Set the initial content.
 const content = '<p class="text"> Double click on the following formula to edit it.</p><p style="text-align: center;"><html><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>z</mi><mo>=</mo><mfrac><mrow><mo>-</mo><mi>b</mi><mo>&#xB1;</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></html></p>'
 
 
 ReactDOM.render(<FroalaEditorComponent tag='div' config={ froalaConfig } model={ content } />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 reportWebVitals();
Note: the initial content in the editor can be empty or filled with the custom initial text you prefer.

3. Finally, run the development server to initialize the Froala editor.

npm run start

Services

If you need additional configurations (e.g., MathType's editor customization or specific cache storage destination), you need to install the integration services.

These services are available for various technologies. Hit on the technology you are using to see full instructions.

Note: the services for Froala 3 or higher can be found inside the ZIP files in the Froala 2 downloads, which have the integration frontend and services all together.

ASP.NET

To install the .NET services, follow the steps below:

  1. Download the MathType Integration for Aspx package.
  2. Copy the froala_wiris/integration folder into your project. For this example, we are assuming that the services are located at DOCUMENT_ROOT/aspx-services/
  3. Add the following attribute to Froala options:
$('#example').froalaEditor({
mathTypeParameters : {
    serviceProviderProperties : {
            URI : 'http://localhost/aspx-services/integration',
            server : 'aspx'
        }
    }
}

Java

To install the Java services follow the steps below:

  1. Download the MathType Integration for Java package in the Froala 2 section.
  2. Deploy the pluginwiris_engine war file.
  3. Add the following attribute to Froala options:
$('#example').froalaEditor({
    mathTypeParameters : {
        serviceProviderProperties : {
            URI : '/pluginwiris_engine/app/configurationjs',
            server : 'java'
        }
    }
}

Ruby on Rails

To install the Ruby on Rails services follow the steps below:

  1. Download the MathType Integration for Ruby on Rails package in the Froala 2 section.
  2. Install the wirispluginengine.gem gem.
    gem install -l wirispluginengine.gem
  3. Add the following attribute to Froala options:
    $('#example').froalaEditor({
        mathTypeParameters : {
            serviceProviderProperties : {
                URI : '/wirispluginengine/integrationn',
                server : 'ruby'
            }
        }
    }

PHP

To install the PHP services, follow the steps below:

  1. Download the MathType Integration for PHP package in the Froala 2 section.
  2. Copy the froala_wiris/integration folder into your project. For this example, we are assuming that the services are located at DOCUMENT_ROOT/php-services/
  3. Add the following attribute to Froala options:
    $('#example').froalaEditor({
        mathTypeParameters : {
            serviceProviderProperties : {
                URI : 'http://localhost/php-services/integration',
                server : 'php'
            }
        }
    	}

Frontend + Services

Our integration is available for various technologies. Hit on the technology you are using to see full instructions.

ASP.NET

  1. Unzip aspx-froala_wiris-x.x.x.x.zip and copy the directory wiris into your Froala plugins directory.
  2. Create an application through your IIS control panel with root directory wiris. If, given your project requirements or architecture you need to have only a single application, move wiris/bin to the bin directory of your project and copy wiris/Web.config to your project's Web.config. For .NET 4.0 and above, instead use wiris/Web.config4.0.
  3. Give write permissions to the web server user in wiris/integration/cache and in wiris/integration/formulas. There will be stored MathML formulas and temporary images. If preferred, the location of these directories can be configured (see next point).
  4. Edit wiris/configuration.ini to your preferred configuration. A list of parameters can be found here: http://www.wiris.com/en/plugins/docs/resources/configuration-table.

Java

  1. Unzip java-froala_wiris-x.x.x.x.zip and install pluginwiris_engine.war in your Java web applications server (e.g. tomcat).
  2. Give write permissions to the web server user in pluginwiris_engine/cache and in pluginwiris_engine/formulas. There will be stored MathML formulas and temporary images. If preferred, the location of these directories can be configured (see next point).
  3. Edit WEB-INF/pluginwiris/configuration.ini to your preferred configuration. A list of parameters can be found here: http://www.wiris.com/en/plugins/docs/resources/configuration-table. For versions older than 3.50.0 it is necessary to set the value of wiriscachedirectory and wirisformuladirectory.

Ruby on Rails

  1. Install the gem wirispluginengine.gem manually
  2. Specify the wirispluginengine gem inside your application's Gemfile.
  3. Mount Wirispluginengine into your application's config/routes.rb file by adding the following line:
mount Wirispluginengine::Engine => 'wirispluginengine'
  1. Give write permission to the web server user in wirispluginengine-X.Y.Z/cache and in wirispluginengine-X.Y.Z/formulas. There will be stored MathML formulas and temporary images. If preferred, the location of these directories can be configured (see next point).
  2. In the wirispluginengine gem root directory, edit configuration.ini. A list of parameters can be found here: http://www.wiris.com/en/plugins/docs/resources/configuration-table.

PHP

  1. Unzip php-froala_wiris-x.x.x.x.zip and copy the directory wiris into your Froala plugins directory.
  2. Give execution permission to the web server user to the PHP files contained in wiris/integration.
  3. Give write permission to the web server user in wiris/integration/cache and wiris/integration/formulas. There will be stored MathML formulas and temporary images. If preferred, the location of these directories can be configured (see next point).
  4. Edit wiris/configuration.ini to your preferred configuration. A list of parameters can be found here: http://www.wiris.com/en/plugins/docs/resources/configuration-table.
  5. Very large formulas may not be rendered if the output_buferring option is enabled. Either disable it or set a high enough value in your server's php.ini file.

Frontend only

Generic Installation

  1. Install the npm module:
    npm install @wiris/mathtype-froala
  2. Load the module into your project:
    <script src="node_modules/@wiris/mathtype-froala/wiris.js"></script>
  3. Update Froala configuration. Add MathType and ChemType buttons to the toolbar and the image menu:
    ${}.froalaEditor({
      // Enable the plugin.
      pluginsEnabled: ['wiris'],
     
      // Add the buttons to the toolbar and image edit buttons
      toolbarButtons:   ['wirisEditor', 'wirisChemistry'],
      toolbarButtonsMD: ['wirisEditor', 'wirisChemistry'],
      toolbarButtonsSM: ['wirisEditor', 'wirisChemistry'],
      toolbarButtonsXS: ['wirisEditor', 'wirisChemistry'],
      imageEditButtons: ['wirisEditor', 'wirisChemistry', 'imageRemove'],
     
     
      // Allow all tags, in order to allow MathML:
      htmlAllowedTags:  ['.*'],
      htmlAllowedAttrs: ['.*'],
     
      // Allow empty tags on these next elements for proper formula rendering:
      htmlAllowedEmptyTags: ['mprescripts', 'none'],
     
      // In case you are using a different Froala editor language than default,
      // language: 'es',
      // You can choose the language for the MathType editor, too:
      // @see: https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/parameters#regional_properties
      // mathTypeParameters: {
      //   editorParameters: { language: 'es' },
      // },
     
    })

Notice the example assumes this directory structure:

  └───index.html
  └───node_modules
      └───@wiris/mathtype-froala

AngularJS

Note: If using AngularJS in your project, you also need to follow the steps in the previous section for one of the technologies listed.

Create an AngularJS project:

$ npm install -g @angular/cli@1.7.4
$ ng new my-app
$ cd my-app

Add angular-froala-wysiwyg

  1. Install angular-froala-wysiwyg
    $ npm install angular-froala-wysiwyg --save
  2. Open src/app/app.module.ts and add:
    import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
    ...
     
    @NgModule({
    ...
    imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
    ...
    })
  3. Open .angular-cli.json and insert a new entry into the styles and scripts arrays:
    "styles": [
      "styles.css",
      "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
      "../node_modules/froala-editor/css/froala_style.min.css",
      "../node_modules/font-awesome/css/font-awesome.css"
    ]
    ...
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
      "./assets/froala_wiris/integration/WIRISplugins.js",
      "./assets/froala_wiris/wiris.js"
    ]
  4. Open src/app/app.component.ts and replace everything with:
    import { Component, OnInit } from '@angular/core';
    declare var $ :any;
     
    @Component({
      selector: 'app-root',
      template: `<div class="sample">
                <h2>Sample 11: Add Custom Button</h2>
                <div [froalaEditor]="options" [(froalaModel)]="content" ></div>
              </div>`,
    })
     
    export class AppComponent implements OnInit {
     
      ngOnInit () {
     $.FroalaEditor.DefineIcon('alert', {NAME: 'info'});
     $.FroalaEditor.RegisterCommand('alert', {
       title: 'Hello',
       focus: false,
       undo: false,
       refreshAfterCallback: false,
     
       callback: function () {
         alert('Hello!');
       }
     });
      }
     
      public options: Object = {
     charCounterCount: true,
     toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat','alert', 'wirisEditor', 'wirisChemistry'],
     toolbarButtonsXS: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
     toolbarButtonsSM: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
     toolbarButtonsMD: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
      };
    }
  5. Put the entire Froala integration folder (not only the content) downloaded from here into src/app/assets with the name froala_wiris.
  6. Go to src/assets/froala_wiris/wiris.src.js and:
  • Insert the next function to FroalaIntegration class:
    getPath() {
    return 'assets/froala_wiris';
    }
  • Modify getScriptPath function to:
    function getScriptPath() {
    return 'assets/froala_wiris';
    }

7. Change the configuration service path. Configuration service is the entry point to load the backend configuration into the plugin. The property froalaIntegrationProperties.configurationService should be changed to the absolute path of the configurationjs service and the CORS should be enabled. For further information about configurationjs service and CORS visit the following link.

8. Open a terminal and go to src/assets/froala_wiris.

9. Run the next command npm install && npm run build.

Run server

1. Enable CORS to avoid security warnings and errors: In src/app/assets/froala_wiris/wiris.js change the variable froalaIntegrationProperties.configurationService to the full path of configuratonjs (i.e http://localhost:8080/pluginwiris_engine/app/configurationjs). This call loads all necessary server configuration into the client side.

...
froalaIntegrationProperties.configurationService = "http://localhost:8080/pluginwiris_engine/app/configurationjs"; 
...


2. Enable CORS domain adding the key wiriscorsenabled=true into configuration.ini file. More information about WIRIS CORS domain. In the development environment, run angular-cli server with the next command and see if it works:

ng serve
For a production environment, there is information here about how to deploy correctly the project.

In order to check if the integration is installed correctly, there is a page that makes some tests on your server. Open this link to see where is your test page.