Skip to main content

MathType for Froala

Recurso_18.svg

Before you continue reading

The following article assumes the MathType integrations architecture. We encourage you to grasp the architecture to properly understand the Frontend and Services notation and choose the appropriate deployment to satisfy your needs.

Demos and integration downloads

Collaborative mode

Note MathType is compatible with Froala's collaborative mode, allowing your users to write equations simultaneously in a shared document.

Requirements

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

  • Froala 4 or higher installed.

  • A valid license to install the integration in a production environment; otherwise, you can use the downloaded file just for demo purposes.

Frontend + Cloud Services

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

Requirements:

  • npm (v6.13.4)

  • Angular (v11.2.10)

Steps:

1. Run the following through the terminal

Caution

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' },
   // },
  };
}

Caution

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

Requirements:

  • npm (v6.13.4)

  • create-react-app (v3.4.0)

Installation:

1. Run the following through the terminal

Caution

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();

Caution

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.

Caution

Note: the services for Froala 4 or higher can be found inside the ZIP files in the downloads, which have the integration frontend and services altogether.

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'
        }
    }
}

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 + On-premises Services

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

  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.

  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.

Testing

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.