MathType for Froala

Technology Demo Integration download link
PHP servers Demo site Download
ASP.NET Demo site Download
Java Demo site Download
Ruby on Rails Demo site Download
  • Froala Editor v2.0.0 or higher installed.
  • Froala Image integration enabled.
  • A valid license to install MathType integration in a production environment (otherwise, you may use the download for demo purposes).
  • For AngularJS: node and npm. Download these here

Below we show a basic integration example. The main steps are:

  • Include wiris.js and WIRISplugin.js in your page (e.g. <script src='my/path/to/wiris.js' ...)
  • Add MathType Web Math and MathType Web Chemistry buttons to the toolbar.
  • Add the buttons to the image toolbar.
  • Modify Froala allowed tags.
('#example').froalaEditor({
      iframe: true,
       // Add [MW] buttons to Toolbar.
      toolbarButtons: ['undo', 'redo' , 'bold', '|', 'wirisEditor', 'wirisChemistry','clear', 'insert'],
 
      // Add [MW] buttons to Image Toolbar.
      imageEditButtons: ['wirisEditor', 'wirisChemistry', 'imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove'],
 
      // Allowed tags
      htmlAllowedTags:   ['.*'],
      htmlAllowedAttrs: ['.*'], 
    });

Technologies

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

AngularJS

  • Create an AngularJS project:
    $ npm install -g @angular/cli
    $ ng new my-app
    $ cd my-app
  • Install angular-froala-wysiwyg
    $ npm install angular-froala-wysiwyg --save
  • Open src/app/app.module.ts and add
    import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
    ...
     
    @NgModule({
       ...
       imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
       ...
    })
  • 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"
    ]
  • Open src/app/app.component.ts and replae 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'],
      };
    }
  • Move the entire Froala integration folder (not only the content) downloaded from here into src/app/assets with the name froala_wiris.
  • Enable CORS to avoid security warnings and errors. To do this, in src/app/assets/froala_wiris/wiris.js change
    var _wrs_int_conf_file = "/pluginwiris_engine/app/configurationjs";

    to the full path of configurationjs (i.e. http://localhost:8080/pluginwiris_engine/app/configurationjs). This call loads all necessary server configuration into the client side. You should end up with

    var _wrs_int_conf_file = "http://localhost:8080/pluginwiris_engine/app/configurationjs"; 
  • Enable CORS domain by adding the key wiriscorsenabled=true into the file configuration.ini. More information about MathType CORS domain.
  • Run angular-cli-server with the following command and see the result:
    $ ng serve

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.

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.