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

English [Auto],

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
Learn to build rich text editors in React with Draft.js, covering editor setup, content state, and bold and underline formatting. Save and display edited content in your app.
Course resources0:09
What is Draft.js?2:57
Draft.js is a React framework for building rich text editors, powered by an immutable model and open-sourced by Facebook. It renders on every keystroke and supports styling via toolbar buttons.
EditorState1:29
EditorState is an immutable, all-encompassing record that represents the entire editor state, including the current text content, the current selection, and the fully decorated contents with styles.
ContentState1:45
Explore how content state captures blocks and entity ranges as the editor's full contents in Draft.js. Learn how getCurrentContent retrieves content being rendered and its before and after selection states.
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
Create a new React app with create-react-app using Yarn, explore the generated folder structure, and run the development server with live reload to start coding right away.
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.

Add rich text utilities to the editor9:28
Add rich text utilities to the editor by implementing a handle key command that uses a utility library to apply bold, italic, and underline through editor state updates.
Enhance the rich text utilities9:22
Enhance rich text utilities in a React editor by adding buttons for bold, italic, underline, and code blocks, wiring them to a key command handler and supporting ctrl/command bindings.

Display and convert contents of the editor to JSON7:40
Extract the editor's content state from the editor state, convert it to a raw representation, and display it as a pretty JSON string. Use a pre element for rendering.
Understanding how Draft.js ContentState represents the content6:54
Explore how Draft.js content state represents text: each paragraph is a block in the blocks array with a unique key, text, inline style ranges, and the entity map.
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
Learn to display saved Draft.js content as HTML by converting the editor's content state with a dedicated exporter, install the library, and render an HTML view alongside the editor.
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: