Draft.js 安装和配置指南

2026-01-21 04:50:28作者：董斯意

1. 项目基础介绍和主要编程语言

项目介绍

Draft.js 是一个用于构建富文本编辑器的 React 框架，由 Facebook 开发并开源。它提供了一个强大的、可扩展的 API，使得开发者可以轻松地创建各种富文本编辑体验，从基本的文本样式到嵌入媒体内容。

主要编程语言

Draft.js 主要使用 JavaScript 编写，并且是基于 React 框架构建的。

2. 项目使用的关键技术和框架

关键技术

React: Draft.js 是一个 React 组件，因此需要 React 来运行。
Immutable.js: Draft.js 使用了 Immutable.js 来管理编辑器的状态，确保状态的不可变性。

框架

React: 作为前端框架，Draft.js 完全依赖于 React。
Node.js: 用于安装和管理项目依赖。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装 Draft.js 之前，请确保你已经安装了以下软件：

Node.js: 建议使用最新稳定版本。
npm 或 yarn: 用于管理项目依赖。

安装步骤

1. 创建一个新的 React 项目

如果你还没有一个 React 项目，可以使用 create-react-app 来创建一个新的项目：

npx create-react-app my-draft-editor
cd my-draft-editor

2. 安装 Draft.js

在项目根目录下，使用 npm 或 yarn 安装 Draft.js：

npm install draft-js react react-dom

或者使用 yarn：

yarn add draft-js react react-dom

3. 创建一个简单的 Draft.js 编辑器

在 src 目录下创建一个新的文件 MyEditor.js，并添加以下代码：

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

export default function MyEditor() {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty());
  const editor = 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>
  );
}

4. 在主应用中使用编辑器

打开 src/App.js，并替换其内容为以下代码：

import React from "react";
import MyEditor from "./MyEditor";

function App() {
  return (
    <div className="App">
      <h1>My Draft.js Editor</h1>
      <MyEditor />
    </div>
  );
}

export default App;

5. 运行项目

在项目根目录下运行以下命令启动开发服务器：

npm start