在 React JS 中创建富文本编辑器

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

示例

首先创建一个 React 项目：-

npx create-react-app tutorialpurpose

现在转到项目目录：-

cd tutorialpurpose

下载并安装以下包：-

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

我们将使用此包在我们的 React 项目中包含一个“wysiwyg”编辑器。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 应用默认样式。

输出

执行后，将产生以下输出：-

更新于：2021 年 9 月 29 日

3K+ 浏览量

开启您的职业

完成该课程从而取得认证

开始
广告