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.

Saloon

may not the problem, but a editor without content is WHITE BLANK. make a click to check if the cursor blinks. – Unharness

it is happening the same to me, how did you solve it? – Passbook

also same issue, anything???? – Camaraderie

Answer 1

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".

Drippy

Answer 2

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

1. Download the Draft.css file and include it in your source code.

2. 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.

Foretoken

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 – Extrauterine

Answer 3

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/#/

Pirbhai

Answer 4

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.

Casino