Draft.js - Rich text editor framework

Nov 29, 2022 in Slideshow 1848 views

Download

Overview
Documents

User Rating: 4.1/5 ( 1 votes)

Your Rating:

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

Extensible and Customizable: We provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media.
Declarative Rich Text: Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API.
Immutable Editor State: The Draft.js model is built with immutable-js, offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage.

Source: github.com

Since the release of React 16.8, you can use Hooks as a way to work with EditorState without using a class

import React from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";

export default function MyEditor() {
  const [editorState, setEditorState] = React.useState(() =>
    EditorState.createEmpty()
  );

  const editor = React.useRef(null);
  function focusEditor() {
    editor.current.focus();
  }

  return (
    <div
      style={{ border: "1px solid black", minHeight: "6em", cursor: "text" }}
      onClick={focusEditor}
    >
      <Editor
        ref={editor}
        editorState={editorState}
        onChange={setEditorState}
        placeholder="Write something!"
      />
    </div>
  );
}

Because Draft.js supports unicode, you must have the following meta tag in the <head></head> block of your HTML file:

<meta charset="utf-8" />

Draft.css should be included when rendering the editor.

JS Tutorial

Draft.js - Rich text editor framework

Related Articles