I'm going to break this into two guides, one is going to focus on how you can customize the toolbar, and the next guide is going to focus on how you can actually encode images into strings so that they can be stored with the rest of the text content.

So let's get started. I'm going to want to remove a few of these items, I don't want every one of these icons here, and so let's walk through how we can do that. And as you may have guessed, the way that you can work with this and customize it is by passing in custom props. And so that's what we are going to do in this guide.

You want to open up the rich text editor component that we built out. And go down to the editor component itself and we're going to create a new prop here. And the prop needs to be called toolbar. So toolbar is going to take in an object, but more than just an object, you're going to have to put two sets of curly brackets. And you need to do whenever you're passing an object inside of a prop.

Because if we were to simply use the single curly brackets, like we did in editor state or on editor state change, then JavaScript would simply expect a single item. Or a function, or something like that. But what we're doing is we want to pass an entire object. So that's why we have to use a second set of brackets, it's just to say that this is an embedded object.

So now with that in place, let's just add a few of the options. So the first one is going to be inline, and for that, I'm going to say inDropdown, and I want this to be true. And if you're curious on where I'm getting this, once again, it's in the documentation. I looked at one of the examples they had, I picked and chose the items that I wanted and that is what this is coming off of.

Next one is list, and I want to have that inDropdown as well, so that one should be in list true. Next one is going to be textAlign, textAlign is going to also be in the dropdown. And the next one is going to be link, because we do want to use links, that will be in the dropdown as well. And then history, inDropdown. That allows you to have things like undo and different things like that.

And lastly is going to be image, this is where we start to get into being able to pull the image in and to be able to allow you to embed them inside of the text editor. Now I'm only going to implement the first half of this, but we will get to see a few things working even in this guide. So I'm going to say image, and image takes its own set of arguments.

So inside of the image, I am going to say that we need to have an upload callback. So what this is, is we are going to be able to define a function that is going to run any time an image is added whether we drop the image in, or if we pick it from the file system, so this is uploadCallback.

Now this has to be named uploadCallback, but then you can create a function named anything you want. I'm going to say this.uploadFile, we need to create this function and we will do that shortly. And then we want to have some alt text, so for alt text, this is going to be an object. I'll say present: true, mandatory: false. So this means that we have the ability to add some alt text for search engine optimization and things like that.

PreviewImage, which is something very cool, true. And then lastly, we have to define the white list for the types of files that we'll allow. So inputAccept is the name of that key, and then we pass in a single string. The string is going to be separated by commas, but it's important you type it out exactly like how I am typing, image/gif,image/jpeg,image/jpg,image/png,image/svg. So what we're saying here is we are defining the images and the image types in the file types that we are going to allow.

rich-text-editor.js

toolbar={{
  inline: { inDropdown: true },
  list: { inDropdown: true },
  textAlign: { inDropdown: true },
  link: { inDropdown: true },
  history: { inDropdown: true },
  image: {
    uploadCallback: this.uploadFile,
    alt: { present: true, mandatory: false },
    previewImage: true,
    inputAccept: "image/gif,image/jpeg,image/jpg,image/png,image/svg"
  }
}}

So now with that in place, let's create this upload file method. It's a callback method, so I'm going to say upload file. It takes in the file as the argument. So we're going to pass that in as the argument and for right now, we're just going to console.log it.

In the next guide, we're going to see how we can connect this to a base64 encoder and how we can convert it to a string. But for right now, let's just make sure that this is working. So upload file, and let's grab the file.

rich-text-editor.js

uploadFile(file) {
  console.log("upload file", file);
}

So this is going to throw an error when we drop an image onto it, but we are going to be able to see this console log before that happens. So let's open up the console, and then let's also open up the module. I'm going to give us some room so we can actually see the module. And now what we can do, you can see, for one, our tool bar has been changed. We now have a different set, a smaller set of the icons so we don't have all of the items.

Definitely if you want to have all of them or if I pick some and you want some different ones, look through the Draft.js documentation. Go through it and it has all of the lists of props inside of that icon list, and you can simply pick and choose the ones that you want.

So our image right here, this is one I'm concerned about right now. If you click on this, you can see that we now have not just the url uploader, but also a file uploader, so that is working perfectly.

Now let's see though what happens when we drop a file onto it. I have some sample images here, I'm going to click and drag it. And you see we get these errors, and it says it's loading.

So we're going to walk through in the next guide why this is, for right now though, let's just make sure that we actually do have access to the file. So now you can see where our console logs statement of upload file that did work. And if you click on this, you can see that the image that we uploaded from the file system is there, and we have all of the metadata for it.

We can see it's a jpeg image, we see the size of it, we see the file name, when it was modified, all of the things that we are going to need in order to convert this and encode it into something that we can use. So great job if you went through that, you now know how to customize the Draft.js toolbar and you've started to implement the file uploader for the rich text editor.

Resources

• Source code