Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Nikolaus Graf

June 29, 2016
Tweet

More Decks by Nikolaus Graf

Other Decks in Programming

Transcript

  1. You are born
 Pretty exciting! Becoming a teenager First kiss

    First breakup: Why me? DraftJS released time happiness
  2. @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.
  3. @nikgraf Lorem ipsum dolor sit amet Lorem ipsum #dolor sit

    amet Lorem ipsum dolor sit amet ContentState
 Block Text - Character ContentState
  4. @nikgraf Manipulation • decorators (wrap text with a Component) •

    “React” -> “React” • blockStyleFn (apply class to a whole block) • blockRendererFn (render custom block)
  5. @nikgraf The End 
 Thanks for listening!
 
 https://github.com/nikgraf
 


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