score:3

Accepted answer

Please see the readme for the tinymce-react wrapper:

https://github.com/tinymce/tinymce-react

Loading TinyMCE by yourself

To opt out of using TinyMCE cloud you have to make TinyMCE globally available yourself. This can be done either by hosting the tinymce.min.js file by youself 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.

What you have loaded via the import is just the wrapper that helps TinyMCE operate in React. You have not loaded TinyMCE itself. If you load TinyMCE before your React component is loaded the wrapper will not try to load TinyMCE from TinyMCE Cloud.

score:1

I'm using Create React App and I'd tried many things including the instructions on TinyMCE's website. Nothing worked for me until I found this blog post cited above by Derek Morrison.

I had to add these tinymce imports in addition to importing the React Editor component:

import 'tinymce/tinymce';
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/table';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/ui/oxide/content.min.css';
import 'tinymce/skins/content/default/content.min.css';
import { Editor } from '@tinymce/tinymce-react';

score:6

I had the same problem, and it seems you need to import TinyMCE like this to initialize it:

import 'tinymce/tinymce';

Then, you can use the <Editor> component with a locally-hosted TinyMCE installation. You also need to import icons, themes, plugins, skins as needed.

I found this post helpful.


Related Query

More Query from same tag