Rich text editing with Draft.js
•
4 likes•2,231 views
Walking through how Draft.js EditorState is structured, how to use decorators as well as custom blocks.
More Related Content
What's hot
What's hot (16)
Similar to Rich text editing with Draft.js
Similar to Rich text editing with Draft.js (20)
More from Nikolaus Graf
Recently uploaded
Recently uploaded (20)
Rich text editing with Draft.js
- 1. Rich text editing with Draft.js
- 2. @nikgraf Nik Graf @nikgraf nik@nikgraf.com Open Source Carte Blanche DraftJS Plugins Belle
- 3. You are born Pretty exciting! time happiness
- 4. You are born Pretty exciting! Becoming a teenager time happiness
- 5. You are born Pretty exciting! Becoming a teenager First kiss time happiness
- 6. You are born Pretty exciting! Becoming a teenager First kiss First breakup: Why me? time happiness
- 7. You are born Pretty exciting! Becoming a teenager First kiss First breakup: Why me? DraftJS released time happiness
- 8. @nikgraf DraftJS DraftJS is a framework for building rich text editors in React built & used within Facebook. It got released at ReactConf in February and powers editing of comments, notes and status updates within Facebook.
- 9. @nikgraf
- 10. @nikgraf
- 11. @nikgraf <div contenteditable=“true"> This text can be edited by the user. </div>
- 12. @nikgraf
- 14. @nikgraf Lorem ipsum dolor sit amet Lorem ipsum #dolor sit amet Lorem ipsum dolor sit amet ContentState Block Text - Character ContentState
- 15. @nikgraf
- 16. @nikgraf
- 17. @nikgraf
- 18. @nikgraf
- 19. @nikgraf
- 20. @nikgraf
- 21. @nikgraf Manipulation • decorators (wrap text with a Component) • “React” -> “React🎉” • blockStyleFn (apply class to a whole block) • blockRendererFn (render custom block)
- 28. @nikgraf
- 30. @nikgraf The End Thanks for listening! https://github.com/nikgraf https://twitter.com/nikgraf http://www.meetup.com/Vienna-ReactJS-Meetup/