How to load tinymce editor in React using local tinymce js

Question

I am trying to implement tinymce editor in my react app. But its call js from tinymce cloud. I want it to work locally. I went through the documentation of tinymce for local hosted js but couldn't implement it. Can someone help me to do so.

Thanks in advance.

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

.....

<Editor
                        style={{margin: "0px !important"}}
                        init={{
                        plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help',
                        toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
                        height: 500
                        }}
                        initialValue={this.state.htmlContent}
                        onChange={this.handleEditorChange}
                    />                   

Sickener

Here is the answer: link! – Santa

Answer 1

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.

Ephemerality

How should I do that? – Sickener

can you give me a code example of the implementation? I have already gone through the website... – Sickener

go.tiny.cloud/blog/how-to-integrate-react-with-tinymce this worked for me thanks!!! – Sickener

@JeetheshKotian how you do that local tinymce js. i go through this go.tiny.cloud/blog/how-to-integrate-react-with-tinymce link but couldn't implement it. can please help me out how to implement locally or it need a apikey compulsory . – Ebro

@MichaelFromin its work when hosting that file but i need it locally please help me out this. – Ebro

I added a new answer that gives the implementation that worked for me. – Profile

Answer 2

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.

Douala

Answer 3

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';

Profile

Answer 4

TinyMCE charging for editor loads with a "free" account led me to this easy solution. Instead of using Editor attribute "apiKey" use "tinymceScriptSrc" to point at a CDN that hosts TinyMCE (a version supported by @tinymce/tinymce-react); I'm currently using cdnjs.cloudflare.com.

If you want to host yourself you'll need everything for tinymce, not just tinymce.min.js but also the icons, plugins, skins and themes folders. You should be able to download a zip file from www.tiny.cloud. I put tinymce.min.js into a local folder but without all the supporting folders and files, and the Editor component failed because it couldn't find them. IIRC it was searching from where I put the min.js file, which means you can point attribute "tinymceScriptSrc" at your tinymce.min.js file and it should find the other files it needs. The errors in the browser's Developer Tools console were pretty obvious. I chose to use a CDN at that point.

Hellenistic