Rich text editing in React with Draft.js

Name: Rich text editing in React with Draft.js
Rating: 3.8 (35 reviews)

Add and modify rich text in your React application

Created byTuomo Kankaanpää

Last updated 6/2019

English

What you'll learn

How to add rich text editor component to your React application
How to add features like bold and underline to the editor
How to save rich text content to database
How to load rich text content from database
How to edit saved content
How to display saved rich text content e.g. as HTML

Course content

5 sections • 19 lectures • 1h 49m total length

Introduction1:26
Course resources0:09
What is Draft.js?2:57
EditorState1:29
ContentState1:45
Summary of EditorState and ContentState1:02
Explore how editor state and content state objects organize Draft.js content, including the editor contents and two selection states before and after rendering, and how they are used.

Setup sample application with create-react-app3:49
Add Draft.js1:58
Install draft.js for a React project using npm, add it to the project, and verify it in package.json, then prepare to use draft.js in the app.
Draft.js editor10:06
Create a Draft.js editor in a React app by building an editor component, importing editor and editorState, and wiring an onChange handler. Render hello world and add rich style features.

Display and convert contents of the editor to JSON7:40
Understanding how Draft.js ContentState represents the content6:54
Save editor content to database9:03
Learn to save and load rich text editor content in a React with Draft.js app using local storage, and optionally via a REST API to a database.
Load saved editor content from database15:19
Learn to load saved editor content from local storage into a draft.js editor by deserializing raw data with convertFromRaw, converting to content state, and creating an editor state.
Display saved contents as HTML part 110:41
Display saved contents as HTML part 24:10
Display saved contents as HTML in a React Draft.js editor using dangerouslySetInnerHTML. This approach is not recommended due to cross-site scripting risks and potential security exposure.
Best way to display saved content10:43
Use a read-only draft.js editor to display saved content as static text, loading content from local storage into an editor state and rendering it without edit controls.

Requirements

Basic knowledge of Javascript and React

Description

In this course we will go through how to add rich text editing features (such as bold, underline, italic) to your React application, using an open source framework called Draft.js.

You will learn

How to add rich text editor component to your React application
How to add features like bold and underline to the editor
How to save rich text content to database
How to load rich text content from database
How to edit saved content
How to display saved rich text content e.g. as HTML

Prior knowledge of rich text editing and Draft.js is NOT required. Basic knowledge on React is however required because we will be concentrating on Draft.js features.

Who this course is for:

React developers who want to learn how to handle rich text editing in a React application

Rich text editing in React with Draft.js

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 9min

Installation3 lectures • 16min

Adding rich text editing features2 lectures • 19min

Storing, retrieving and displaying Draft.js content7 lectures • 1hr 5min

Summary1 lecture • 1min

Requirements

Description

Who this course is for: