[TinyMCE] Error displaying images - NextJs

[trikool11]

Description

Hello everyone. First of all, I would like to tell you that my English is not perfect but I will try to explain what is happening to me, I don't know if I am doing things wrong or if I am missing some additional step.

To get into context I am using TinyMCE to integrate MathType under NextJs, React "Create React App" and VueJs, these last 2 being discard tests to find out if the problem was only in React but the same thing happens to me in the last 2.

What does the bug consist in?

The problem is that when integrating the text editor and the MathType plugin, some of the formulas are not displayed correctly on the landing page, for example:

Note: The images and settings are under NextJs, I'm not using the APP Directory.

These are the modules and versions that I am using.

{
  "@tinymce/tinymce-react": "^4.3.0",
  "@wiris/mathtype-tinymce6": "^8.3.1",
  ...
}

I have added in the Head the script that indicates:

<script src='https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image'></script>

This is my somewhat basic component with no additional plugins:

If you notice in line 14 the plugin is in the directory of my PUBLIC folder since when doing line 15 I get the following error and the solution I found was to put it as I mentioned, in the PUBLIC folder.

I asked myself these questions:

1. Does storing mathtype-tinymce6 in the PUBLIC folder affect anything?
2. Do I need to import something else?
3. Do I need to use an external module to display the formulas correctly?
4. Do I need JQuery for this to work?

Finally, I need to know if I'm doing something wrong or if I'm missing some configuration since I've been trying to solve this problem for days.

I hope I have been understood.

[SantiagoGaonaC]

Hi, I don't know if you already solved that problem, but my solution was to copy the plugin.min.js in my public, I made a folder where the structure is like:

- public 
   └── math
       └── plugin.min.js

and using:

external_plugins: {
            tiny_mce_wiris: `/math/plugin.min.js`,
          },

webpack for Tiny: in the next.config.js add:

/** @type {import('next').NextConfig} */
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.plugins.push(
      new CopyPlugin({
        patterns: [
          {
            from: path.join(__dirname, "node_modules/tinymce"),
            to: path.join(__dirname, "public/assets/libs/tinymce"),
          },
        ],
      })
    );
    return config;
  },
};

module.exports = nextConfig;

in the line 14 using:

tinymceScriptSrc={"/assets/libs/tinymce/tinymce.min.js"}