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

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

示例

首先创建一个 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来应用默认样式。

输出结果

在执行时，它将产生以下输出 -