How do I load plugins in tinymce-react?

Question

So I recently purchased the self-hosted version of the PowerPaste plugin. I downloaded it, unzipped it and copied it into the node-modules/@tinymce folder. But when I tried to load it it's still trying to fetch the powerpaste plugin from the cloud, instead of reading it locally.

From what I've read online tinymce-react only seems to support the cloud version of TinyMCE, not the self-hosted version. So what are my options for loading this plugin?

score 2 · Answer 1 · answered Apr 12 '19 at 14:26

You could try something like this:

import tinymce from 'tinymce/tinymce'
import 'tinymce/plugins/powerpaste' // or wherever your purchased plugin is
import { Editor } from '@tinymce/tinymce-react'

<Editor
  init={{
    plugins: 'powerpaste'
  }}
/>

It's worth noting though that you would no longer be getting Tinymce from the cloud with this approach and would need to add it to your package.json. As mentioned above, the tinymce-react component will check the cloud first, but including it globally this way should work. You may have to add your other plugins this way as well since it won't be coming from the cloud anymore. ex:

import 'tinymce/plugins/image'
import 'tinymce/plugins/imagetools'
import 'tinymce/plugins/table'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/link'

Thanks! this helped me a lot – Mauro Bilotti Jul 15 '21 at 20:10 — Mauro Bilotti, Jul 15 '21 at 20:10

score 0 · Answer 2 · answered Apr 01 '19 at 17:11

tinymce-react will load from the Cloud if it does not find a local installation of Tiny.

From the official documentation on GitHub (emphasis mine):

The Editor component needs TinyMCE to be globally available to work, but to make it as easy as possible it will automatically load TinyMCE Cloud if it can't find TinyMCE available when the component is mounting.

If you don't want TinyMCE loading from the cloud, you have to make TinyMCE globally available yourself. This can be done either by hosting Tiny on your own webserver and adding a script tag to you HTML or, if you are using a module loader, installing TinyMCE with npm. For info on how to get TinyMCE working with module loaders check out this page in the documentation.

Also if you have purchased PowerPaste, then you likely have access to Tiny's Official Support channel. If you continue to need assistance, you can submit a ticket here.

How do I load plugins in tinymce-react?

2 Answers2