数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 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+ 浏览量
广告