MUKI space*
Front-end Development,
Effective Note-Taking.
在 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 上獲取。...
VSCode 的好用註解套件，高亮註解顏色，將註解變成 TODO 待辦事項
最近開發功能愈加複雜，為避免日後難以理解自己的註解，選擇使用兩款 VSCode 套件：Better Comments 和 Todo Tree。Better Comments 能高亮顯示註解，根據前綴詞設定不同顏色；Todo Tree 除了高亮功能，還可管理註解為待辦事項。這兩款套件各有特色，若不介意刪除線功能，只需選擇一款即可。
Better Comments 提供多種顏色與前綴詞設定，提升註解可讀性；Todo Tree 則能將註解集中管理，方便追蹤任務進度。兩者結合使用，能更靈活地管理註解，提升開發效率。...
我的 Visual Studio Code 編輯器設定記錄 (佈景與模組)
2016 年開始使用 Brackets 編輯器，後來轉用 VS Code，因為其更新速度快、延伸模組豐富。VS Code 每月固定更新，且提供 Brackets 的內建功能如 CSS Peak。延伸模組如 Auto Rename Tag、Bracket Pair Colorizer 2、cdnjs 等，讓開發更順利。
推薦的其他模組包括 Git History、HTML CSS Support、Live Server、Settings Sync 等。這些模組能提升開發效率，並提供多樣化的功能，適合客製化需求。...
我的 Brackets 編輯器設定 (佈景與外掛)
Brackets 是一款不太流行但功能豐富的編輯器，適合喜歡客製化的用戶。它支持即時預覽 HTML/CSS，且可快速查看及編輯 CSS。內建的選色功能讓設計更便捷，無需安裝額外外掛。
Brackets 提供多種外掛，從實用的 Git 整合到炫技的 CSS 顏色預覽，滿足不同需求。客製化簡便，字體樣式可輕鬆調整。內建 live preview 功能，支持即時語法檢視。還有中文介面選擇，適合不同語言使用者。...