- Read Tutorial
- Watch Guide Video
So, as you may have noticed, whenever you click on add a new blog, you only have room for a title and a Blog status. You don't have the field that we've talked about for being able to write blog posts and we could just put a text area tag in there and be done, that would have been the very easy approach for this.
But I think that would have been doing a disservice to you because one common feature that I've been asked to build for React applications is what is called a what you see is what you get editor. It is an editor you might have seen in systems like WordPress or on certain Facebook applications.
So, it gives you the ability to have features like I'll walk through right here where you can go and type some text in, you can change the heading, you can add certain values like underlining or italics or bold or even adding images and we're gonna leverage a library created by Facebook called Draft.js in order to implement this.
And in this guide, we're simply gonna install the dependencies and we're going to split up the next few guides like we have done throughout this entire course to give a step-by-step approach for what you need to do in order to implement a what you see is what you get editor.
So, let's open up Visual Studio Code and open up the terminal because we're gonna be installing this with npm, so I'm gonna say npm i to install and there are four libraries that we need to install. The first one is draft-js, the second one is react-draft- and this one might look weird but it is what you see is what you get editor.
And that's what many times you'll hear that whenever you see this wysiwyg. You'll hear it called WYSIWYG(whizzy-wig) and it stands for what you see is what you get. At the end of the day, it's just a rich text editor, it allows you to format your code or format a blog post or any kind of content and be able to add any of those rich media features.
So, those are the first two. The next one is draft and it's just draftjs-to-html and then the last one's html-to-draftjs.
npm i draft-js react-draft-wysiwyg draftjs-to-html html-to-draftjs
Okay, that was a mouthful and as this is running, I'm going to fast forward the video until it's all installed because these are four decent sized libraries and we'll come back when those are all installed, and we're back and it looks like all four of those installed properly.
And it's always worth to take a look at what those libraries represent. So, let's open up, we've already seen Draft.js and this is nice, whenever you have a large library, a lot of times they will create their own dedicated website with documentation and different things like that and so, that's nice when they do that.
But some of these other ones are ones you have to look up and actually go through their documentation yourself. I'm gonna just copy over these names so you don't have to watch me typing them.
The first one is react-draft-wysiwyg and then the next one, I'm gonna open up all of these before we actually look at 'em. The next one is going to be draftjs-to-html and then lastly is gonna be the html-to-draftjs. And I'm going to paste that one in and let's just take a quick look through each one of these just to see what their roles and responsibilities are.
The root module is draft.js, every one of the other modules we are adding are more like plugins and they layer on top of this library. If you didn't include this library, those other ones would not work. It is the Rich Text Media Editor. The next one is react-draft-wysiwyg and this is what gives you some of the, essentially the layering of components on top of Draft.js, so without this, you wouldn't have a few of these nice features like they have custom font families and they have a lot nicer interface, so this looks a lot better.
If we were to use Draft.js by itself, you'd end up with an editor that looks like this
and this is okay but I really prefer to have some of these cool looking icons and they just give some nice functionality that you usually would have to spend a lot of time if you wanted to write all of this yourself. So, I definitely recommend you going through reading the documentation, seeing all of the different features they offer and reading the documentation.
I know I've mentioned it quite a few times in this course, there is no type of magic skill when it comes to implementing the types of features we've been building. It really comes down to going through the docs, going through the examples they provide.
That is gonna help you more than anything else. So, right here, this is showing some of the custom features such as being able to pass in what props are available and those kinds of things. The next one is draftjs-to-html and so, what this does, as you can see here, it's a library for converting DraftJS Editor content to plain HTML.
If you noticed and I mentioned this earlier, if you look at a few of the older posts that I have, you see how we have these paragraph tags and we have divs and we actually have images. That is all because when I was testing out these blog posts, it was with the completed version of the application which I integrated the Rich Text Media Editor in, so this is what we'll be generating. So, from now on, instead of just plain text, you'll actually be generating HTML when you save your blog posts.
Then lastly, we have the html-to-draftjs and so, this is essentially the, this is the opposite way, the first one was one direction, draftjs-to-html, now it's html-to-draftjs and that's how you can have features where when you will click to say edit a post, you'll be able to actually take all that HTML and it'll be converted into something that the editor can parse and work through.
So, in this guide, we installed the four key libraries needed to build a WYSIWYG or a what you see is what you get rich text editor. And in the next few guides, we're gonna start building and integrating this directly into the application.