Can't figure out why draft-js is not shown

Question

I followed draft-js document to create a very simple demo of draft-js.

Everything seems work well, but when I open the url in Chrome, I can only see a white blank page (there is a hidden editor component there but is not visible)

There is no error on the console of the browser.

The demo project is here: https://github.com/js-demos/react-draft-js-demo, you can clone it and follow the readme to run it.

I have reviewed the code very carefully, but can't figure out why.

may not the problem, but a editor without content is WHITE BLANK. make a click to check if the cursor blinks. — Jiang YD, Aug 15 '16 at 05:48

score 23 · Answer 1 · edited Apr 14 '17 at 01:35

23

If you just use the sample code on the official website of Draft.js, you will see nothing on the page. It's just a blank text input field. If you click that field, you could type something. Draft.js is not a out of the box plugin, but a "a framework for building rich text editors in React".

enter image description here

edited Apr 14 '17 at 01:35

Unheilig

16,196
193
68
98

answered Apr 14 '17 at 01:19

Xin Chuc

231
2
4

score 5 · Answer 2 · answered Mar 02 '17 at 16:41

5

Hope you figured it out, if not (or for anyone else), the solution for me was two step:

Download the Draft.css file and include it in your source code.
Reference said file in your index.html as such:

<link rel="stylesheet" href="./src/components/Draft.css" />

In other words, your problem was to do with the styling of the Draft-js Editor, since for you the editor was 'hidden' i.e. without any discernible box around it etc.

answered Mar 02 '17 at 16:41

WΔ_

1,229
4
20
34

2

You should actually just use the file bundled in the library. Just import into your project like this `import 'draft-js/dist/Draft.css';` ... still didn't fix the issue for me, but it did add all the CSS – SeanMC Mar 29 '20 at 19:58

score 1 · Answer 3 · answered Dec 07 '20 at 18:12

1

Actually, I tried a lot to solve this problem but in vain. What I did is using another package that is built on the top of draft js, and It's working fine.

you can find it here:https://jpuri.github.io/react-draft-wysiwyg/#/

answered Dec 07 '20 at 18:12

Ammar Ismaeel

651
1
11
21

score 0 · Answer 4 · answered Sep 21 '20 at 10:47

I'm no genius, but might I recommend this: https://www.youtube.com/watch?v=XGxdCXyMC7k

In short, it looks like the default is just a Rich Text Editor enabler type thing. You want more of a single instance, like their demo in the 'Rich Styling' section of the docs.

Can't figure out why draft-js is not shown

4 Answers4