A simple Angular App integrating WIRIS MathType on a Froala and step-by-step information on how to build it. The code of this example loads a rich text editor instance with a default value.
$ npm install
$ npm start
More information on the different ways to run a demo here
Runs the app in the development mode.
Open http://localhost:4004/ to view it in the browser.
Install MathType for Froala dependency.
$ npm install --save @wiris/mathtype-froala
Open the src/app/app.module.ts file and add:
// Expose FroalaEditor instance to window.
declare const require: any;
(window as any).FroalaEditor = require("froala-editor");
require("@wiris/mathtype-froala"); // Import WIRIS MathType formula editor.
Open src/app/app.component.ts and add the following content:
// 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);
...
export class AppComponent {
// Set options for the editor.
public options: Object = {
toolbarButtons: [
'wirisEditor',
'wirisChemistry'
],
// 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'],
// You can choose the language for the MathType editor:
// @see: https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/parameters#regional_properties
// mathTypeParameters: {
// editorParameters: { language: 'es' },
// },
};
}
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"></div>
Finally, you are ready to run the development server through the specified command ng serve
$ npm run test
Execute the end-to-end tests via Protractor.
Checkout the FAQ file learn more about the most frequent asked questions.
You can learn more in the Create Angular App documentation.
To learn more about Angular, check out the Angular documentation.
For more information about the Froala or it’s options, you can check their documentation.
To get more information about wiris MathType you can check on the official documentation
Copyright © 2010-2022 WIRIS. Released under the MIT License.