Member-only story
How To Implement a Rich Text Editor in Your React App
Customize the look and feel of your own editor
What we want to accomplish: a beautiful and reliable text editor for your React application. It will enable the user to write articles/stories in the same manner that they would on Medium, Google Docs, or any other editor that supports block (normal text, H1, H2, etc) and inline (bold, underline, italic, etc) formatting, as well as inserting links and images or even ordered and unordered lists of items. We are also going to see how we can access the text that the user inserted, along with the applied formatting — in the form of HTML.
We are going to use a library that wraps the DraftJS framework developed by Facebook. Simply put — as stated in their docs — DraftJS is a “Rich Text Editor Framework for React.” That’s it. I have started implementing the editor by directly using the framework. It is of course doable, but it felt very time-consuming. Luckily, I discovered a very handy wrapper library: react-draft-wysiwyg.
Wysiwyg stands for What you see is what you get, and it’s a perfect description of such an editor: the user will apply certain formatting and that’s exactly what their article/story will look like afterward, let’s say when it gets published on the website.
