使用 React JS 创建富文本编辑器

react jsjavascript libraryfront end technology更新于 2025/11/19 10:20:17

在本文中，我们将使用 React JS 构建一个文本编辑器，用户可以在其中在线编辑文本。许多网站都提供此功能。文本编辑器用于编辑纯文本文件。文本编辑器与文字处理器(例如 Microsoft Word 或 WordPerfect)的不同之处在于，它们不会向文档添加额外的格式信息。

示例

首先创建一个 React 项目:−

npx create-react-app tutorialpurpose

现在转到项目目录 −

cd tutorialpurpose

下载并安装以下软件包 −

npm install --save react-draft-wysiwyg draft-js

我们将使用此软件包在我们的 React 项目中包含一个"所见即所得"编辑器。 draft-js 将用于管理在其中编写或上传的内容。

现在您只需导入 CSS 即可使文本编辑器组件看起来美观。

在 App.js 中添加以下代码行 −

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

export default function App() {
   return (
      <Editor
         toolbarClassName="toolbarClassName"
         wrapperClassName="wrapperClassName"
         editorClassName="editorClassName"
         wrapperStyle={{ width: 800, border: "1px solid black" }}
      />
   );
}

使用 "wrapperStyle" 属性编辑编辑器的宽度或高度。或者，使用 border.Classname 应用默认样式。