資料結構
網路
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+ 瀏覽量
廣告