Draft.js富文本编辑器5分钟快速安装配置指南

2026-02-08 04:21:35作者：霍妲思

Draft.js是Facebook开源的React富文本编辑器框架，为开发者提供了强大而灵活的文本编辑解决方案。无论你是构建博客系统、在线文档工具还是内容管理系统，Draft.js都能满足你的需求。本指南将带你从零开始，在短短5分钟内完成安装配置并创建第一个富文本编辑器。

环境准备检查清单

在开始安装Draft.js之前，请确保你的开发环境满足以下要求：

Node.js 版本14.0.0或更高
npm 6.0.0或更高，或yarn 1.22.0或更高
React 16.8.0或更高版本（支持Hooks）
现代浏览器支持（Chrome、Firefox、Safari、Edge）

极速安装步骤详解

第一步：创建React项目基础

如果你还没有React项目，可以通过以下命令快速创建：

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

第二步：安装Draft.js核心包

在项目根目录下执行安装命令：

npm install draft-js

或者使用yarn进行安装：

yarn add draft-js

第三步：创建基础编辑器组件

在src目录下创建RichTextEditor.js文件，添加以下代码：

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

const RichTextEditor = () => {
  const [editorState, setEditorState] = useState(() => 
    EditorState.createEmpty()
  );
  const editorRef = useRef(null);

  const handleFocus = () => {
    editorRef.current.focus();
  };

  return (
    <div 
      style={{ 
        border: '1px solid #ddd',
        padding: '10px',
        minHeight: '200px',
        cursor: 'text'
      }}
      onClick={handleFocus}
    >
      <Editor
        ref={editorRef}
        editorState={editorState}
        onChange={setEditorState}
        placeholder="开始输入你的内容..."
      />
    </div>
  );
};

export default RichTextEditor;

第四步：集成到主应用

打开src/App.js文件，替换内容如下：

import React from 'react';
import RichTextEditor from './RichTextEditor';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>我的富文本编辑器</h1>
        <RichTextEditor />
      </header>
    </div>
  );
}

export default App;