Rich text editing with Draft.js

Rich text editing with Draft.js

Walking through how Draft.js EditorState is structured, how to use decorators as well as custom blocks.

Afcee4ad6e383e26799ff05681d1a2a5?s=128

Nikolaus Graf

June 29, 2016
Tweet

Transcript

  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

  13. @nikgraf Structure EditorState • ContentState • SelectionState

  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)
  22. @nikgraf Decorator

  23. @nikgraf Decorator

  24. @nikgraf Decorator

  25. @nikgraf blockRendererFn

  26. @nikgraf blockRendererFn

  27. @nikgraf blockRendererFn

  28. @nikgraf

  29. None
  30. @nikgraf The End 
 Thanks for listening!
 
 https://github.com/nikgraf
 


    https://twitter.com/nikgraf http://www.meetup.com/Vienna-ReactJS-Meetup/