/
TAG
Ant Design

在 React 使用 Quill 編輯器,並加入上傳圖片至圖床的功能

在 React 中使用 Quill 編輯器,並增加上傳圖片至圖床的功能。react-quill 套件已久未更新,因此轉用官方 Quill 套件。Quill 預設將圖片轉為 base64,但專案需求改為上傳至圖床並插入網址。可在 toolbarOptions 中設定工具列,並增加 uploadImage 功能上傳圖片。

安裝 Quill React 使用 npm,編輯器分為 Editor.js(x) 和 EditorQuill.js(x) 兩部分。Editor.js(x) 載入 Quill 的 snow 或 bubble 主題樣式。EditorQuill.js(x) 設定工具列並新增上傳圖片功能,圖片上傳後插入編輯器,並設置樣式 max-width 為 100%。完整程式碼可在 codesandbox.io 參考。...

客製化 Quill 編輯器,並搭配 ant design 製作所見即所得編輯器

為了整合公司內部系統,決定使用 Quill 編輯器重寫文章管理系統,因為 Markdown 無法直接調整文字顏色,轉而選擇 WYSIWYG 編輯器。Quill React 因功能齊全且客製化選項多,最終被選為編輯器。

Quill React 安裝簡單,透過 npm 指令即可完成,並內建兩種主題:snow 和 bubble。可自訂工具列,並加入自訂按鈕,如 undo、redo。使用 HTML 可完全客製化工具列內容,但需謹慎考慮。完整程式碼可在 GitHub 和 CodeSandbox 上獲取。...

Copyright © since 2008 MUKI space* / omegaSS theme All Rights Reserved.