8 Playgrounds for Examples from Official Draft.js Repository (v.0.10.0)

Last four working days were quite interesting, as I was moving rich editor that we used in our application from the TinyMCE to Draft.js. There were many reasons why I decided to do this. The most general was to have more ownership over editor in our app and be possible to customize it quite easily, so it would reflect our needs (yeah, and make it possible to fix any bugs in the editor on your side). Moreover, I think that I will be able to reuse created rich editor, that it based on the draft-js in the re-frame project, on which I will be working in next month.

Working with Draft.js is quite challenging and interesting at the same time. Challenging as this pretty new tool, so there is some lack of the documentation and enough examples of the documentation (you can fin documentation on the official web-site: https://facebook.github.io/draft-js/docs/overview.html#content  + check the issues on the Github: https://github.com/facebook/draft-js/issues; links to a quite a lot of examples of the usage are available in the Awesome Draft.js )  At the same time, it was interesting as give very deep understanding what basic concepts are used in the editors.

During my work (or better to name it my investigation and trying to understand how everything actually works in Draft.js) examples were the most helpful things. I have found in the official repository basic and very good examples of usages of different Draft.js functionality and created some playgrounds for these examples, so to be able play with them/modify them to my needs. Enjoy playing with Draft.js! 🙂

1. Rich Text Editor

See the Pen Rich Text – Draft.js example by Olena Sovyn (@Kiwka) on CodePen.

Link to the playground: http://codepen.io/Kiwka/pen/YNYvyG
Code source: https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/rich

2. Color Editor

See the Pen Color – Draft.js example by Olena Sovyn (@Kiwka) on CodePen.

Link to the playground: http://codepen.io/Kiwka/pen/oBpVve
Code source: https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/color/

3. Convert from HTML Editor

See the Pen Convert from HTML – Draft.js example by Olena Sovyn (@Kiwka) on CodePen.

Link to the playground: http://codepen.io/Kiwka/pen/YNYgWa
Code source: https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/convertFromHTML

4. Entity Editor

See the Pen Entity Editor – Draft.js example by Olena Sovyn (@Kiwka) on CodePen.

Link to the playground: http://codepen.io/Kiwka/pen/wgpOoZ
Code source: https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/entity/

5. Link Editor

See the Pen Link Editor – Draft.js example by Olena Sovyn (@Kiwka) on CodePen.

Link to the playground: http://codepen.io/Kiwka/pen/ZLvPeO
Code source: https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/link/

6. Media Editor

See the Pen Media Editor – Draft.js example by Olena Sovyn (@Kiwka) on CodePen.

Link to the playground: http://codepen.io/Kiwka/pen/rjpRzj
Code source: https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/media/

7. Plain Text Editor

See the Pen Plain Text Editor – Draft.js example by Olena Sovyn (@Kiwka) on CodePen.

Link to the playground: http://codepen.io/Kiwka/pen/jyYJzb
Code source: https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/plaintext/

8. Decorators Editor – Tweet example

See the Pen Decorators – Tweet – Draft.js example by Olena Sovyn (@Kiwka) on CodePen.

Link to the playground: http://codepen.io/Kiwka/pen/KaZERV
Code source: https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/tweet/