iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
2
Modern Web

TypeScript + React + 雜七雜八系列 第 18

【Day 18】Draft.js,用 React 來控制的 rich text editors,再更多功能

大家好,今天的篇章要介紹的是延續昨天的 Draft.js

一樣會延續前一天的專案結構接續下去進行修改,如果沒有參與到昨天的建置過程,這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day17-draft-js


在前一篇已經實作了最基本的 Editor 來改變值並做存取

RichUtils,粗體、斜體、底線

接下來要放上文字編輯器最基本的粗體、斜體、底線功能

要先安裝 @material-ui/icons 來得到方便使用的 svg Icon

npm i @material-ui/icons

利用 material-ui 的 IconButton 來加幾個帶有 icon 的按鈕

會是這樣使用它

Button 所掛的事件

這邊利用 draft.js 提供的 RichUtils,它所提供的靜態方法可以直接改變 editorState 的值並回傳,預設 提供了 BOLD ITALIC UNDERLINE CODE 這幾種,選取的文字狀態 draft.js 也會幫你處理

就來個執行結果看看

CODE 的使用漏掉了,也補上來

執行結果

在這邊先附上目前的完整程式碼


customStyleMap,font-size、font-family

似乎已經有一點點文字編輯器的樣子,但是還可以有更多功能,最好還要能夠調整 font-size,或是修改 font-family,就來實作吧

首先新增 styleMap 相關的設定檔

+ src/components/DraftJsPractice/useStyleMap.ts

這邊定義了待會下拉選單會用到的 fontFamilyStyleMap 以及 fontSizeStyleMap,最後一個 customStyleMap 是要讓 Editor 讀的

回到 src/components/DraftJsPractice/DraftJsPractice.tsx

這裡對 Editor 增加了屬性 customStyleMap={customStyleMap},也做了兩個下拉選單以及對應的處理事件來切換 style

執行結果

切換 font-size

切換 font-family


因為時間來不及的關係,超連結及圖片得日後再行補上,十分抱歉

RichUtils 超連結

AtomicBlockUtils 圖片


以上就是筆者在使用 Draft.js 一點小小心得,完全用 React 的方式來實作文字編輯器,聽說可能是會有一點點效能上的問題,因為每個動作對 Editor 來說都是會觸發 onChange 去改變 state,不過目前實作的狀況都還算是人類感覺不到有拖累效能的吧 XD

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day18-draft-js


明天會介紹 React DnD,在 React 實現 drag drop 的好工具


上一篇
【Day 17】Draft.js,HTML contenteditable 用 React 來控制的 rich text editors
下一篇
【Day 19】React DnD,用 React 來實作 drag drop
系列文
TypeScript + React + 雜七雜八30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言