Download to read offline
Uploaded byNikolaus Graf
Rich text editing with Draft.js
Draft.js is an open-source framework for building rich text editors in React, developed and used by Facebook. Released at ReactConf in February, it enables editing of various text formats like comments and status updates. The document includes details on its structure, manipulation techniques, and customization through decorators and rendering functions.
Technologyâ—¦
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Rich text editing with Draft.js
- 1. Rich text editingwith Draft.js
- 2. @nikgraf Nik Graf @nikgraf
 nik@nikgraf.com Open Source CarteBlanche DraftJS Plugins Belle
- 3. You are born
 Prettyexciting! time happiness
- 4. You are born
 Prettyexciting! Becoming a teenager time happiness
- 5. You are born
 Prettyexciting! Becoming a teenager First kiss time happiness
- 6. You are born
 Prettyexciting! Becoming a teenager First kiss First breakup: Why me? time happiness
- 7. You are born
 Prettyexciting! Becoming a teenager First kiss First breakup: Why me? DraftJS released time happiness
- 8. @nikgraf DraftJS DraftJS is aframework 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.
- 10.
- 11. @nikgraf <div contenteditable=“true"> This textcan be edited by the user. </div>
- 12.
- 13.
- 14. @nikgraf Lorem ipsum dolorsit amet Lorem ipsum #dolor sit amet Lorem ipsum dolor sit amet ContentState
 Block Text - Character ContentState
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. @nikgraf Manipulation • decorators (wraptext with a Component) • “React” -> “React🎉” • blockStyleFn (apply class to a whole block) • blockRendererFn (render custom block)
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 30. @nikgraf The End 
 Thanks forlistening!
 
 https://github.com/nikgraf
 
 https://twitter.com/nikgraf http://www.meetup.com/Vienna-ReactJS-Meetup/