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

16
votes

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.

4
reactjsdraftjs
may not the problem, but a editor without content is WHITE BLANK. make a click to check if the cursor blinks. – Jiang YD
it is happening the same to me, how did you solve it? – ciaoben
also same issue, anything???? – caffeinescript

4 Answers

20
votes

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

5
votes

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.

0
votes

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.

0
votes

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