{{htmlmetatags>
	metatag-keywords=(mathtype, google docs, office, math editor, equation, wiris, math, maths, lms, pages, documentation, user-guide, handwritten input, froala)
	metatag-description=(Learn how to use Mathtype Web to create math and chemistry notation for Froala.)
	}}

====== MathType for Froala ======


===== Demos and integration downloads =====


|  [[https://demo.wiris.com/integrations/froala/|Demo site]]  |  [[https://store.wiris.com/en/products/downloads/mathtype/integrations#mathtype_for_froala3|Download]]  | 

===== Requirements =====

  * Froala Editor v2.x installed.
     * In case you are using Froala 3.x, see [[https://www.npmjs.com/package/@wiris/mathtype-froala3|here]].
  * 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 [[https://nodejs.org/en/download/|here]]

===== Include it in your platform=====

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 [MW] Math and [MW] Chemistry buttons to the toolbar.
  * Add the buttons to the image toolbar.
  * Modify Froala allowed tags.

<code javascript>
('#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: ['.*'], 
    });
</code>

==== Technologies ====

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

<accordion collapsed="true">
<panel title="ASP.NET">
  - Unzip ''aspx-froala_wiris-x.x.x.x.zip'' and copy the directory ''wiris'' into your Froala plugins directory.
  - [[http://support.microsoft.com/kb/172138|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''.
  - 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).
  - 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|]].
</panel>
<panel title="Java">
  - Unzip ''java-froala_wiris-x.x.x.x.zip'' and install ''pluginwiris_engine.war'' in your Java web applications server (e.g. tomcat).
  - 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).
  - 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''.
</panel>
<panel title="Ruby on Rails">
  - Install the gem ''wirispluginengine.gem'' [[http://guides.rubygems.org/command-reference/#gem-install|manually]]
  - Specify the ''wirispluginengine'' gem inside your application's Gemfile.
  - [[http://guides.rubyonrails.org/engines.html#hooking-into-an-application|Mount]] ''Wirispluginengine'' into your application's ''config/routes.rb'' file by adding the following line:
<code>
mount Wirispluginengine::Engine => 'wirispluginengine'
</code>
  - 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).
  - 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|]].
</panel>
<panel title="PHP">
  - Unzip ''php-froala_wiris-x.x.x.x.zip'' and copy the directory ''wiris'' into 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/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).
  - 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|]].
  - 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.
</panel>
</accordion>

==== AngularJS ====

<callout type="info" color="#428BCA" icon="fa fa-info-circle">**Note:** If using AngularJS in your project, you also need to follow the steps in the previous section for one of the technologies listed.</callout>

=== Create an AngularJS project: ===

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

=== Add angular-froala-wysiwyg ===

  - Install angular-froala-wysiwyg<code>$ npm install angular-froala-wysiwyg --save</code>
  - Open ''src/app/app.module.ts'' and add: <code javascript>import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

@NgModule({
...
imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
...
})</code>
  - Open ''.angular-cli.json'' and insert a new entry into the styles and scripts arrays:<code javascript>"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"
]</code>
  - Open ''src/app/app.component.ts'' and replace everything with:<code javascript>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'],
  };
}
</code>
  - Put the entire Froala integration folder (not only the content) downloaded from [[http://www.wiris.com/en/plugins/froala/download?filter=froala|here]] into ''src/app/assets'' with the name ''froala_wiris''.
  - Go to src/assets/froala_wiris/wiris.src.js and:
  * Insert the next function to ''FroalaIntegration'' class:<code javascript>
getPath() {
return 'assets/froala_wiris';
}
</code>
  * Modify getScriptPath function to:<code javascript>
function getScriptPath() {
return 'assets/froala_wiris';
}
</code>
  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 [[en:mathtype:mathtype_web:integrations:cross-domain|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.<code>
...

froalaIntegrationProperties.configurationService = "http://localhost:8080/pluginwiris_engine/app/configurationjs"; 
...
</code>
\\
2. Enable CORS domain adding the key ''wiriscorsenabled=true'' into ''configuration.ini'' file.
[[en:mathtype:mathtype_web:integrations:cross-domain|More information about WIRIS CORS domain]].
In the development environment, run ''angular-cli'' server with the next command and see if it works:
<code>ng serve</code>
<caption>For a production environment, there is information [[https://angular.io/guide/deploymen|here]] about how to deploy correctly the project.</caption>



===== Testing =====

In order to check if the integration is installed correctly, there is a page that makes some tests on your server. [[en:mathtype:integrations:html:plugins-test|Open this link to see where is your test page]].

<html><table style="width: 100%"><tr><td align="left"><a href="ckeditor"><button>Previous: MathType for CKEditor</button></a></td><td align="right"><a href="generic"><button>Next: Generic MathType integration</button></a></td></tr></table></html>