DEV Community

Rich text editing on the web: Getting started with Draft.js

Rose on October 23, 2019

Once upon a time, not too long ago, rich text editors on the web were a huge challenge to implement. There were options, the most popular being Tin...
Collapse
 
omercohenaviv profile image
Omer Cohen

Hey Rose,
a little question about draft-js
is there a way to control how many images can user insert?
Thanks

Collapse
 
rose profile image
Rose

Hey! A slightly complicated answer: Yes you can but....

By default out-of-the-box draft.js doesn't support images at all. It's fairly simple to add basic support:

there's an article here: medium.com/@siobhanpmahoney/buildi...
Or you can use something like this pre-built plugin: draft-js-plugins.com/plugin/image

From there you'd have to add some kind of control for maximum images on your end and enforce the rule. Since you are the one that controls editorState being updated at all times, you have the power to veto any change. With images, if they are being added by a user through a button, you could disable the button whenever they exceed a total number of images, and re-enable when they are under the maximum. Tracking total images should be fairly simple by using the onChange callback by searching for and counting total number of the custom image entity, or you could check on-the-fly whenever the button is clicked.

Collapse
 
omercohenaviv profile image
Omer Cohen

Wow Rose, thanks alot for such a deep answer wasn't expecting it.
Also a great article surely will keep following!

Collapse
 
hpouyanmehr profile image
Hosein Pouyanmehr

You can use contenidojs. It's a library on top of draft-js with a lot of ready-to-use utilities.

I have an introduction post for that if someone is interested.

Collapse
 
aliplutus profile image
aliplutus

is it possible to create an app like docs.google.com with only draftjs and its blugins?

Collapse
 
ahmedhlaimi profile image
AhmedHlaimi

just bolt and italic in the demo

Collapse
 
rose profile image
Rose

This is the first post in a series of posts, as you move through you'll find the demo becomes more fleshed out.

Collapse
 
ahmedhlaimi profile image
AhmedHlaimi

Thanks

Collapse
 
gaurav_singhbhandari_abe profile image
Gaurav Singh Bhandari
<div>hello</div>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
marcellothearcane profile image
marcellothearcane • Edited

See tiptap for Vue!

Collapse
 
mrrightp profile image
Right possible

This is a life saver, I have look thought the Internet for a detailed explanation but thank God I came across one 😊

Collapse
 
akari0215 profile image
nako(γͺーこぉ)

Hello from Japan !
This all articles are very educational for me!
May I introduce Draft.js along with your article on my blog?