DEV Community

Cover image for How To Integrate A Rich Text Editor (WYSIWYG) In Your React.Js Project.

How To Integrate A Rich Text Editor (WYSIWYG) In Your React.Js Project.

Lucius Emmanuel Emmaccen on July 10, 2020

In this article, we're going to learn how to "Integrate A Rich Text Editor" in your react.Js project using TinyMCE. Before we begin, let's do a qu...
Collapse
 
yezyilomo profile image
Yezy Ilomo

Good work. Just a reminder don't store your API key in your React App, save it in environment file like .env.local or .env.production as
REACT_APP_TINYMCE_API_KEY=your-api-key-here
and retrieve it by using process.env.REACT_APP_TINYMCE_API_KEY in your react App.

Collapse
 
anuraghazra profile image
Anurag Hazra

I think as long as those API keys are public keys those are fine.

Also note that you cannot hide API keys on FrontEnd because they will be included anyways in the production build

create-react-app.dev/docs/adding-c...

Just don't store any SECRET_KEYs in frontend

Collapse
 
danielkun profile image
Daniel Albuschat

Good advice, but please don't believe that they are secured when you store them in env vars. They're still part of the JavaScript code delivered to the browser, and hence can be viewed by anybody, e.g. via DevTools.

Collapse
 
grantwatsondev profile image
Grant Watson

This is something I need to remember to do. I have to refactor my repos on GitHub to remove them

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Wow ! Real helpful feedback. I'll be sure to do that. Thanks for this 🙏🏽💯

Collapse
 
prateekparmar0 profile image
Prateek Parmar

Does it apply for next.js applications as well?I'm using it in a next js project.

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Hi,
Not so sure, currently the supported integrations are for Angular.js, Angular4+, Bootstrap, jQuery, Rails, Swing, WordPress, Vue, and React.js,

but you can keep an eye out: tiny.cloud/docs/integrations/

Collapse
 
hardaeborla profile image
Hardaeborla

Wow! This is really helpful

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Happy to help.

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Thanks. Happy to help 😊

Collapse
 
adeniyi profile image
Adeniyi Adekunle

Great

Collapse
 
oluwatosin017 profile image
Oluwatosin017

That's really cool. Can't wait to try this out.

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Anytime. Thanks for the feedback

Collapse
 
deepakshrivastavaau1 profile image
Deepak Shrivastava

Worked for me.... thank you Emmanuel fir sharing this.... ✌️✌️✌️😇😇

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Happy to help sir 😎!

Collapse
 
frankinsteinst4 profile image
Frankinstein Stone

I love your works sir. Keep up the good work

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Thanks

Collapse
 
iyashsoni profile image
Yash Soni

A really descriptive one. Trying out today for one of my pet Project. Just curious, how do you compare this with Facebook’s Draft.js? Have you tried that?

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

I haven't tried Draft.js (tho I've read a little about it). Also, I know they've got a lot of users.
Here's a link to the article I read about Draft.Js:
medium.com/@hadijah315/how-to-add-...

Thanks For the feedback 💯

Collapse
 
likerboxdotcom profile image
Twittingpoet

Very great work. Thanks

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Happy to help 😎.

Collapse
 
alli_rasta profile image
rasta_alli

Good Job keep up the good work bro.. So proud of you Emmaccen💯

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Thanks, Ali. Appreciate 🙏🏽💯

Collapse
 
paparazzi_bae profile image
Abbie

Love this😍😍

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Thanks !

Collapse
 
akinloyemichae6 profile image
Mike Jefe

nice work.

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Thanks. Appreciate the feedback.

Collapse
 
diddymagic profile image
diddymagic

wow you give unique insights, remarkable work , I want to suggest you also do a vlog or you tube cos this would help alot out there. Thank you and well done again

Collapse
 
asitsi profile image
asitsi

how to send data using tinymce,WYSIWYG through API ...?

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Hi, "Asitsi".
One way to do this is :
If you go over the code snippets I provided in the article, you'd notice a handleEditorChange function.

  handleEditorChange = (e) => {
    console.log(
      'Content was updated:',
      e.target.getContent()
    );
  }
Enter fullscreen mode Exit fullscreen mode

So with this function, you can grab the values using the e.target.getContent() and store the value in SetState after which you can then access the stored values and send to your API.

Let me know if this helps, thanks.