How to enable Wiris Plugin in Froala Editor using Webpack?

Question

I've successfully installed and configured Froala WYSIWYG Editor using Webpack. But I'm struggling to enable the Wiris MathType plugin. So far I've installed Wiris:

yarn add @wiris/mathtype-froala

And tried to require it in my script that also requires and configures Froala:

import $ from 'jquery';
global.jQuery = $;

// Require Editor JS files.
import FroalaEditor from 'froala-editor/js/froala_editor.pkgd.min.js';

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Require Font Awesome.
import 'font-awesome/css/font-awesome.css';

// Require Wiris plugin
import WirisPlugin from '@wiris/mathtype-froala';
import '@wiris/mathtype-froala/core/styles.css';

$(document).ready(function() {
    $("texarea#froala-editor").froalaEditor({
        ...
        iframe: true,
        pluginsEnabled: ["wirisEditor", ....],
        toolbarButtons: ['undo', 'redo' , 'bold', '|', 'wirisEditor','clear', 'insert'],
        imageEditButtons: ['wirisEditor', 'imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove'],
        htmlAllowedTags:  ['.*'],
        htmlAllowedAttrs: ['.*']
    });
});

But afterwards I get the following error in Chrome Console:

wiris.js:3 Uncaught TypeError: Cannot read property 'editorObject' of null
at s.e.FroalaEditor.COMMANDS.wirisEditor.refresh (wiris.js:3)
at Object.refresh (froala_editor.pkgd.min.js:7)
at froala_editor.pkgd.min.js:7

Firefox shows another error, though probably caused by the same thing.

TypeError: WirisPlugin.currentInstance is null wiris.js:3:5219

I recon I'm doing something wrong but I've not been able to identify what that might be yet.

Any suggestions will be welcome.

How to enable Wiris Plugin in Froala Editor using Webpack?

0 Answers0