DEV Community

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

Read full post

Yezy Ilomo • Jul 10 '20

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.

Anurag Hazra • Jul 10 '20

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

Daniel Albuschat • Jul 10 '20

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.

Grant Watson • Jul 11 '20

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

Lucius Emmanuel Emmaccen • Jul 10 '20

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

Prateek Parmar • Aug 2 '20

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

Lucius Emmanuel Emmaccen • Aug 5 '20

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/

Hardaeborla • Jul 10 '20

Wow! This is really helpful

Lucius Emmanuel Emmaccen • Jul 10 '20

Happy to help.

Lucius Emmanuel Emmaccen • Jul 10 '20

Thanks. Happy to help 😊

Adeniyi Adekunle • Nov 3 '20

Great

Oluwatosin017 • Jul 10 '20

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

Lucius Emmanuel Emmaccen • Jul 10 '20

Anytime. Thanks for the feedback

Deepak Shrivastava • Jul 10 '20

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

Lucius Emmanuel Emmaccen • Jul 10 '20

Happy to help sir 😎!

Frankinstein Stone • Jul 10 '20

I love your works sir. Keep up the good work

Lucius Emmanuel Emmaccen • Jul 10 '20

Thanks

Yash Soni • Jul 10 '20

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?

Lucius Emmanuel Emmaccen • Jul 10 '20

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 💯

Twittingpoet • Jul 10 '20

Very great work. Thanks

Lucius Emmanuel Emmaccen • Jul 10 '20

Happy to help 😎.

rasta_alli • Jul 10 '20

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

Lucius Emmanuel Emmaccen • Jul 10 '20

Thanks, Ali. Appreciate 🙏🏽💯

Abbie • Jul 10 '20

Love this😍😍

Lucius Emmanuel Emmaccen • Jul 10 '20

Thanks !

Mike Jefe • Jul 10 '20

nice work.

Lucius Emmanuel Emmaccen • Jul 10 '20

Thanks. Appreciate the feedback.

diddymagic • Jul 10 '20

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

asitsi • Nov 9 '20

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

Lucius Emmanuel Emmaccen • Nov 10 '20

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()
    );
  }

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.