-
MathType
-
Wiris Quizzes
-
Learning Lemur
-
CalcMe
-
MathPlayer
-
Store FAQ
-
VPAT for the electronic documentation
-
MathFlow
-
BF FAQ
MathType for Froala
Reading time: 7min
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
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-froala3Angular Installation
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-froala32. 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>±</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
ReactJS Installation
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 --save2. 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>±</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:
- Download the MathType Integration for Java package in the Froala 2 section.
- Deploy the pluginwiris_engine war file.
- 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:
- Download the MathType Integration for PHP package in the Froala 2 section.
- Copy the
froala_wiris/integrationfolder into your project. For this example, we are assuming that the services are located at DOCUMENT_ROOT/php-services/ - 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.
PHP
- Unzip
php-froala_wiris-x.x.x.x.zipand copy the directorywirisinto your Froala plugins directory. - Give execution permission to the web server user to the PHP files contained in
wiris/integration. - Give write permission to the web server user in
wiris/integration/cacheandwiris/integration/formulas. There will be stored MathML formulas and temporary images. If preferred, the location of these directories can be configured (see next point). - Edit
wiris/configuration.inito your preferred configuration. A list of parameters can be found here: http://www.wiris.com/en/plugins/docs/resources/configuration-table. - 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.inifile.
Java
- Unzip
java-froala_wiris-x.x.x.x.zipand installpluginwiris_engine.warin your Java web applications server (e.g. tomcat). - Give write permissions to the web server user in
pluginwiris_engine/cacheand inpluginwiris_engine/formulas. There will be stored MathML formulas and temporary images. If preferred, the location of these directories can be configured (see next point). - Edit
WEB-INF/pluginwiris/configuration.inito 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 ofwiriscachedirectoryandwirisformuladirectory.
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.