MathType for TinyMCE

• npm (v6.13.4)

1. Install the MathType for Tinymce npm module:

npm install @wiris/mathtype-tinymce<VERSION_X>

Where <VERSION_X> can be 4 .x.x or 5.x.x or >= 6.1.0

2. Load the module into your project:

<script src="node_modules/@wiris/mathtype-tinymce<VERSION_X>/plugin.min.js"></script>

// Set up the editor. └───@wiris/mathtype-tinymceX
tinymce.init({
    selector: '#editor',
    external_plugins: {
        tiny_mce_wiris: 'node_modules/@wiris/mathtype-tinymce<VERSION_X>/plugin.min.js',
    },
    // This option allows us to introduce mathml formulas
    extended_valid_elements: '*[.*]',
    // We recommend to set 'draggable_modal' to true to avoid overlapping issues
    // with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
    // @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
    draggable_modal: true,
    plugins: ['image', 'media'],
    toolbar: 'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',
    // language: 'fr_FR',
    // You could set a different language for MathType editor:
    // mathTypeParameters: {
    // editorParameters: { language: 'de' },
    // },
});

// This option allows us to introduce mathml formulas
                                                                                              extended_valid_elements: '*[.*]',

• npm (v6.13.4)

1. Run the following through the terminal.

# Note: $APP_NAME is just a placeholder for your application's name. 

# Initialize the project
npx create-react-app $APP_NAME
cd $APP_NAME

# Install TinyMCE and React integration
npm install --save @tinymce/tinymce-react
npm install tinymce

# Install MathType and dependencies
npm install @wiris/mathtype-tinymce6
npm install jquery --save

2. Replace all the content in src/index.js by:
 

// Default create-react-app imports
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
// Import the react editor TinyMCE component.
import { Editor } from '@tinymce/tinymce-react';
// Add jquery.
import $ from 'jquery';
// Load wiris formula render script.
const jsDemoImagesTransform = document.createElement('script');
jsDemoImagesTransform.type = 'text/javascript';
jsDemoImagesTransform.src = 'https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image';
document.head.appendChild(jsDemoImagesTransform);
// This needs to be included before the '@wiris/mathtype-tinymce6' is loaded synchronously
window.$ = $;
window.tinymce = require('tinymce'); // Expose the TinyMCE to the window.
// Load wiris plugin synchronously.
require('@wiris/mathtype-tinymce6');
// Set the initial editor content
const content = '<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>';
// Init the editor and define its options
const options = {
    height: 500,
    menubar: false,
    // Add wiris plugin
    external_plugins: {
        'tiny_mce_wiris': `${window.location.href}/node_modules/@wiris/mathtype-tinymce6/plugin.min.js`
    },
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount '
    ],
    toolbar: [
        ' bold italic |' +
        'tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry '
    ],
    htmlAllowedTags: ['.*'],
    htmlAllowedAttrs: ['.*'],
    extended_valid_elements: '*[.*]',
};
/* Create a component to be rendered later.
This is important to remove complexity from the reactDom.render
and to be able to add other functionality. */
class EditorTiny extends React.Component {
    render() {
        return (
            <Editor init={options} initialValue={content} />
        );
    }
}
ReactDOM.render(<EditorTiny />, 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();

 <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

4. Finally, you are ready to run the development server through the specified command

npm run start

• npm (v6.13.4)

1. Run the following through the terminal.

# Note: $APP_NAME is just a placeholder for your application's name. 
# Initialize the Angular project
ng new $APP_NAME
cd $APP_NAME

# Install TinyMCE and Angular integration
npm install --save @tinymce/tinymce-angular
npm install --save tinymce

# Install MathType for TinyMCE 6
npm install --save @wiris/mathtype-tinymce6

// Import the tinymce options
import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
// Expose tinymce instance to the window
declare const require: any;
(window as any).tinymce = require('tinymce');
// import synchronous mathtype-tinymce5 package
require('@wiris/mathtype-tinymce5')
 ...
@NgModule({
    ...
    imports: [...EditorModule ... ],
    providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }],
    ...
 })

3. Add the following in the .angular.json.

"assets": [
    ...
    {
        "glob": "**/*",
        "input": "node_modules/tinymce",
        "output": "/tinymce/"
    }
    ...
]
    ...
    "scripts": [
    ...
    "node_modules/tinymce/tinymce.min.js"
    ...
]

4. Replace the content of the src/app/app.component.ts file with the code below.

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 {
    title = 'tinymce6';
    // Editor initial content with a mathml formula.
    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>';
    // Define the initial options of the editor
    public options: Object = {
        base_url: '/tinymce', // Root for resources
        suffix: '.min', // Suffix to use when loading resources
        // Add wiris plugin
        external_plugins: {
            'tiny_mce_wiris': `${window.location.href}/node_modules/@wiris/mathtype-tinymce6/plugin.min.js`
        },
        htmlAllowedTags: ['.*'],
        htmlAllowedAttrs: ['.*'],
        // This option allows us to introduce mathml formulas
        extended_valid_elements: '*[.*]',
        // We recommend to set 'draggable_modal' to true to avoid overlapping issues
        // with the different UI modal dialog windows implementations between core and third-party plugins on TinyMCE.
        // @see: https://github.com/wiris/html-integrations/issues/134#issuecomment-905448642
        draggable_modal: true,
        plugins: ['image', 'media'],
        toolbar: 'undo redo | styleselect | bold italic | image media | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',
        // language: 'fr_FR',
        // You could set a different language for MathType editor:
        // mathTypeParameters: {
        // editorParameters: { language: 'de' },
        // },
    };
}

5. Edit src/app/app.component.html and replace its contents with:

<h1>TinyMCE 6 Angular Demo</h1>
<editor id="editor" [init]="options" [initialValue]="content"></editor>

ng serve

• Install the pluginwiris_engine.war in your Java web applications server. For example, tomcat.
• Give write permissions to pluginwiris_engine/cache and to pluginwiris_engine/formulas directories to the web server user. Those folders will be used to store formula MathML codes and temporal images. If you prefer, you can configure the location of these folders .

• mbstring extension must be installed and enabled in the server.
• Give execution rights to the web server user on the PHP files contained at to ckeditor/plugins/ckeditor_wiris/integration.
• Give write permissions to ckeditor/plugins/ckeditor_wiris/cache and to ckeditor/plugins/ckeditor_wiris/formulas directories to the web server user. Those folders will be used to store formula MathML codes and temporal images. If you prefer, you can configure the location of these folders.
• 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.