Initialize a plugin inside a React component

What is the current behavior? I’m trying to initialize a plugin inside a React component to have access to the application data.

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar. All the comments are inside the TinyMCE file component: https://codesandbox.io/s/tinymce-erssm

What is the expected behavior? To initialize the plugin inside the component, for example, inside an effect and not just outside the component which is not possible to access the application data.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react? tinymcereact - 3.3.2
tinymce - 5.1.1

I’ve never tried to do this in other versions.

[SimonFc]

Yeah at that point in time the TinyMCE global doesn’t exist since it’s being fetched and initialized from the cdn once the tinymce-react component initializes, not before. In such cases you can do something like this (note - perhaps make it so that the function that adds the plugin only gets run once in your apps life cycle for performance)

An alternative, if you prefer your current style, is to load TinyMCE manually from the cdn before your functional component initializes. Either by including the a script tag as described here or perhaps even do it programmatically as we’re doing here.

Hope this helps!

[mikedloss]

@SimonFc that sounds all like where my mind was leading me yesterday 😬Yeah we aren’t self hosting, honestly all I’ve done so far was just install @tinymce/tinymce-react into my project and am just using it inside of a functional component. I was trying to create / initialize the plugin above the rendered component (so hoisted above what React is handling), and was looking at window.tinymce to do what I want. I keep finding that that tinymce object exists, it’s just I kept getting that error.

More specifically, I was using that tinymce code snippet inside of this code block:

import { Editor as TinyMCE } from '@tinymce/tinymce-react';

if (window && window.tinymce) {
  const { tinymce } = window;
  tinymce.PluginManager.add('example', (editor, url) => ...more code goes here);
}

// ...later in the same file
// props includes the init object with the plugin list, including the `example` plugin
 
const Editor = (props) => {
  return (
    <TinyMCE apiKey="api-key" init={{ plugins: ['example', ...more plugins], ...more init}} {...props} />
  )
}