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}
                    />

Here is the answer: link!

Alen Vlahovljak
– Alen Vlahovljak

2024-02-13 13:42:15 +00:00
Commented Feb 13, 2024 at 13:42 — Alen Vlahovljak
– Alen Vlahovljak, Commented Feb 13, 2024 at 13:42

Derek Morrison · Accepted Answer · 2020-12-20 06:49:50Z

8

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.

answered Dec 20, 2020 at 6:49

Derek Morrison

5,5844 gold badges34 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 13, 2019 at 2:49

Michael Fromin

13.9k2 gold badges25 silver badges35 bronze badges

6 Comments

Jeethesh Kotian Over a year ago

How should I do that?

Jeethesh Kotian Over a year ago

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

Jeethesh Kotian Over a year ago

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

suraj Over a year ago

@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 .

suraj Over a year ago

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

|

liquidki · Accepted Answer · 2022-03-18 12:18:10Z

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

answered Mar 18, 2022 at 12:18

liquidki

1,3041 gold badge16 silver badges17 bronze badges

Comments

romehu2 · Accepted Answer · 2024-04-17 19:23:52Z

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.

Collectives™ on Stack Overflow

How to load tinymce editor in React using local tinymce js

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related