{"id":7714,"date":"2023-05-11T11:51:47","date_gmt":"2023-05-11T06:21:47","guid":{"rendered":"https:\/\/innovationm.co\/?p=7714"},"modified":"2023-05-11T11:51:47","modified_gmt":"2023-05-11T06:21:47","slug":"draft-js-rich-text-editor","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/","title":{"rendered":"Draft.js – Rich Text Editor"},"content":{"rendered":"

In today’s digital age, communication is key. Whether it’s writing an email, drafting a blog post,
\nor creating a social media update, we’re always looking for ways to improve the way we
\ncommunicate. That’s where a rich text editor comes in. With a rich text editor, you can easily
\nformat your text, add images, and embed videos without any technical knowledge.<\/p>\n

In this blog post, we’ll walk you through how to create a rich text editor using React and Draft.js.
\nWe’ll also cover what a rich text editor is, its uses, and some alternatives to Draft.js.<\/p>\n

\nWhat is a Rich Text Editor?<\/h4>\n

A rich text editor is a tool that allows you to format text in a document or web page. Unlike plain
\ntext, editors like Notepad or TextEdit, rich text editors provide a range of formatting options, such as bold, italic, underline, font size and style, and color. They also allow you to add images, links, and other media to your text.<\/p>\n

A rich text editor is an essential tool for content creators, bloggers, and website developers. It
\nmakes it easy to create professional-looking content without any coding or technical knowledge.<\/p>\n

How to Create a Rich Text Editor with Draft.js?<\/strong><\/p>\n

Draft.js is an open-source rich text editor framework developed by Facebook. It’s built on top of
\nReact provides a set of reusable React components that you can use to build your own
\ncustom rich text editor.<\/p>\n

To get started with Draft.js, you’ll need to create a new React project using create-react-app or
\nany other method of your choice. Once you have your project set up, you can install Draft.js using npm:<\/p>\n

npm install draft-js –save<\/p>\n

Next, you’ll need to import the necessary Draft.js components into your code:<\/strong><\/p>\n

import React, { Component } from ‘react’;
\nimport { Editor, EditorState } from ‘draft-js’;
\nimport ‘draft-js\/dist\/Draft.css’;<\/p>\n

The Editor component is the main component of Draft.js. It renders the text editor and provides
\nall the necessary methods and properties to interact with the text. The EditorState object is a
\nplain JavaScript object that represents the current state of the editor.<\/p>\n

To render the editor in your component, you can create a new instance of the Editor component and pass the editorState property:<\/p>\n

class RichTextEditor extends Component {\r\nconstructor(props) {\r\nsuper(props);\r\nthis.state = { editorState: EditorState.createEmpty() };\r\n}\r\nonChange = editorState => {\r\nthis.setState({ editorState });\r\n};\r\nrender() {\r\nconst { editorState } = this.state;\r\nreturn (\r\n<Editor editorState={editorState} onChange={this.onChange} \/>\r\n);\r\n}\r\n}<\/pre>\n
This will render a basic text editor with all the default formatting options. You can now start
\ncustomizing the editor by adding your own toolbar, custom styles, and other features.<\/p>\n
Uses of a Rich Text Editor –<\/strong><\/p>\n
A rich text editor can be used in a variety of applications, such as:<\/strong><\/p>\n
Blogging platforms:<\/strong> A rich text editor makes it easy for bloggers to create and format their blog posts. They can add images, videos, and other media to their posts without any technical
\nknowledge.<\/p>\n
Email clients:<\/strong> Email clients like Gmail and Outlook use rich text editors to allow users to format
\ntheir emails. Users can change the font size, style, and color of their text, add hyperlinks and
\nattachments, and more.<\/p>\n
Content management systems:<\/strong> A content management system (CMS) like WordPress or Drupal uses a rich text editor to allow website owners to create and edit their website’s content. They can add and format text, add images and videos, and publish their content without any coding knowledge.<\/p>\n","protected":false},"excerpt":{"rendered":"
In today’s digital age, communication is key. Whether it’s writing an email, drafting a blog post, or creating a social media update, we’re always looking for ways to improve the way we communicate. That’s where a rich text editor comes in. With a rich text editor, you can easily format your text, add images, and […]<\/p>\n","protected":false},"author":1,"featured_media":7715,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[360,585,8],"tags":[722,863,860,862,861],"class_list":["post-7714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-mobile-app-development","category-mobile-architecture-and-design","tag-blog","tag-cms","tag-draft-js","tag-drupal","tag-rich-text-editor"],"yoast_head":"\nDraft.js - Rich Text Editor - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Draft.js - Rich Text Editor - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"In today’s digital age, communication is key. Whether it’s writing an email, drafting a blog post, or creating a social media update, we’re always looking for ways to improve the way we communicate. That’s where a rich text editor comes in. With a rich text editor, you can easily format your text, add images, and […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-11T06:21:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/05\/draft.js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1689\" \/>\n\t<meta property=\"og:image:height\" content=\"950\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Draft.js – Rich Text Editor\",\"datePublished\":\"2023-05-11T06:21:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/\"},\"wordCount\":559,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/draft.js.png\",\"keywords\":[\"blog\",\"cms\",\"draft.js\",\"drupal\",\"rich text editor\"],\"articleSection\":[\"JavaScript\",\"Mobile App Development\",\"Mobile Architecture and Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/\",\"name\":\"Draft.js - Rich Text Editor - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/draft.js.png\",\"datePublished\":\"2023-05-11T06:21:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/draft.js.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/draft.js.png\",\"width\":1689,\"height\":950},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/draft-js-rich-text-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Draft.js – Rich Text Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Draft.js - Rich Text Editor - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/","og_locale":"en_US","og_type":"article","og_title":"Draft.js - Rich Text Editor - InnovationM - Blog","og_description":"In today’s digital age, communication is key. Whether it’s writing an email, drafting a blog post, or creating a social media update, we’re always looking for ways to improve the way we communicate. That’s where a rich text editor comes in. With a rich text editor, you can easily format your text, add images, and […]","og_url":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/","og_site_name":"InnovationM - Blog","article_published_time":"2023-05-11T06:21:47+00:00","og_image":[{"width":1689,"height":950,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/05\/draft.js.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Draft.js – Rich Text Editor","datePublished":"2023-05-11T06:21:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/"},"wordCount":559,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/05\/draft.js.png","keywords":["blog","cms","draft.js","drupal","rich text editor"],"articleSection":["JavaScript","Mobile App Development","Mobile Architecture and Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/","url":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/","name":"Draft.js - Rich Text Editor - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/05\/draft.js.png","datePublished":"2023-05-11T06:21:47+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/05\/draft.js.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/05\/draft.js.png","width":1689,"height":950},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/draft-js-rich-text-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Draft.js – Rich Text Editor"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7714"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7714\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7715"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}