MathType for Froala

Requirements:

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:

Steps:

1. Run the following through the terminal

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

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:

Installation:

1. Run the following through the terminal

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

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

npm run start