.TEXT 的編輯介面補強 (自己爽一下)..
摘要提示
- 平台選擇: 使用 .TEXT 作為部落格系統，介面簡單好用
- 內建編輯器: 採用 FreeTextBox v1.6，支援類似 Word 的所見即所得編輯
- 功能缺漏: 內建編輯器缺少插入圖片與表情符號的功能
- 原本做法: 以切換到 HTML 原始碼模式手動加標籤來補足，但操作繁瑣
- 自行改造: 花時間動手修改程式碼，為編輯器新增一排工具列
- 新增功能: 透過自訂工具列達成插入圖片與表情的需求
- 成果展示: 以截圖展示改好後的編輯介面
- 動機心情: 純屬改善體驗與自我滿足的實作紀念
全文重點
作者使用 .TEXT 作為部落格平台，讚賞其操作簡單。然而，內建編輯器 FreeTextBox（文中指出 .TEXT 內建的是 v1.6）雖然提供所見即所得的編輯體驗，像 Word 一樣方便處理 HTML，但在常用功能上有所不足，特別是缺少插入圖片與表情符號的原生支援。這些功能對於日常寫作與排版來說相當實用，缺漏導致作者經常必須切換到 HTML 原始碼模式，手動添加相對應的標籤，既耗時又容易出錯。
為了改善這個痛點，作者決定自行修改程式碼，針對編輯器介面做補強。經過一番調整之後，他在編輯器上額外加了一排工具列，藉此補上插入圖片與表情符號的操作入口，讓原本繁瑣的手動標記流程，轉換為直覺的按鈕點擊。文章以輕鬆語氣分享這次小改造的成果，並附上截圖作為紀錄，既展示改造後的界面，也表達了「自己爽一下」的滿足感。
整體而言，這篇文章聚焦在實務層面的使用心得與快速改造：從辨識到工具不足、到以最小改動滿足核心需求，體現了開發者對工具鏈細節的在意與動手改善的習慣。雖然內容不涉及具體程式碼或技術細節，但點出了 FreeTextBox v1.6 在當時版本的功能限制，以及在 .TEXT 環境下進行 UI/UX 微調的可行性。對於同樣使用 .TEXT 或 FreeTextBox 的使用者，這樣的做法提供了參考方向：當 WYSIWYG 編輯器缺乏特定功能時，可以透過自訂工具列或擴充按鈕來補足；若不想每次都進入原始碼模式，適度的介面增補能有效提升撰寫效率與體驗。
段落重點
平台與編輯器背景
作者使用 .TEXT 作為部落格系統，覺得其簡單好用。內建的編輯器為 FreeTextBox（.TEXT 內含版本為 v1.6），提供類似 Word 的所見即所得操作，讓撰寫 HTML 更加直覺。文章以此作為背景鋪陳，說明原始編輯體驗的基礎能力和優點。
功能缺漏與使用痛點
雖然編輯器功能完整度尚可，但缺少插入圖片與表情符號兩項常見功能。作者過去的做法是切換到 HTML 原始碼模式，手動加入標籤以達到效果；這種方式雖然可行，但在日常寫作流程中顯得繁瑣，增加了操作成本，也可能引發標記錯誤或版面不一致。
自行補強與成果展示
為解決上述痛點，作者動手修改編輯器相關程式碼，在介面上新增一整排工具列，專門用來快速插入圖片與表情，補足原本編輯器的不足。文章以貼圖與截圖的方式展示修改後的介面，並以輕鬆口吻記錄這次小幅度但實用的優化，強調「自己爽一下」的成就與滿足。
資訊整理
知識架構圖
- 前置知識：
- 基本 HTML 與 CSS（理解內容如何以標籤呈現）
- .NET/ASP.NET Web Forms 基礎（伺服端控制項與頁面生命週期）
- .TEXT（早期 .NET Blog/CMS）基本結構與部署概念
- FreeTextBox 編輯器的基本使用與設定
- 基本 JavaScript（與編輯器互動、事件綁定）
- 核心概念：
- .TEXT 博客系統：運行平台與後台編輯工作流
- FreeTextBox v1.6：內建所見即所得編輯器，具備 HTML Source 模式
- 功能缺口：預設缺少「插入圖片」與「插入表情符號」的 UI
- 介面補強：透過修改程式碼新增一排工具列，提供插入圖片/表情的快捷操作
- 使用者體驗：從手動切換 HTML/加標籤，提升為按鈕式插入以降低操作負擔
- 技術依賴：
- .TEXT 後台編輯頁面依賴 FreeTextBox 控制項
- FreeTextBox 的工具列客製需結合其 API/JS 指令與伺服端屬性
- 圖片/表情插入依賴靜態資源或上傳機制與路徑管理
- 前端（JS/樣式）與後端（.NET 控制項、資源提供）協作實作
- 應用場景：
- 舊版 CMS/Blog 編輯器的易用性改良
- 為內部撰寫工具或知識庫加入快速插入媒體/表情的功能
- 在不更換整套系統下的小幅度體驗優化
- 需要降低內容編輯門檻、減少手動 HTML 操作的團隊
學習路徑建議
- 入門者路徑：
- 了解 HTML 基本標籤（特別是 img、a、span）
- 在本機部署 .TEXT 或熟悉類似 ASP.NET Web Forms 專案
- 使用 FreeTextBox 的基本功能與切換 HTML Source 模式體驗
- 進階者路徑：
- 閱讀 FreeTextBox v1.x 的文件與範例，熟悉客製工具列與指令
- 實作自訂工具列按鈕，呼叫 JS/內建命令插入範本標籤
- 建立表情符號資源目錄與清單（sprite 或獨立檔），規劃插入邏輯與路徑
- 實戰路徑：
- 實作「插入圖片」對話框（選取/上傳、ALT、尺寸、對齊）
- 實作「表情挑選器」（網格展示、點選即插入）
- 加上基本權限與安全檢查（檔案類型、大小、路徑白名單）
- 以小規模用戶測試體驗，迭代工具列布局與快捷鍵
關鍵要點清單
- .TEXT 架構定位: 早期 .NET Blog/CMS，後台編輯依賴 Web Forms 控制項與自訂頁面 (優先級: 中)
- FreeTextBox v1.6 限制: 預設缺少圖片/表情插入 UI，需靠 HTML Source 手動標記 (優先級: 高)
- 介面補強思路: 以最小改動新增工具列，集中解決高頻操作痛點 (優先級: 高)
- 自訂工具列按鈕: 利用 FreeTextBox API/JS 綁定指令與插入模板 (優先級: 高)
- 圖片插入流程: 檔案上傳/選取、路徑生成、插入
標籤與屬性設定 (優先級: 高)
- 表情符號管理: 建立資源庫與對映清單，提供挑選器 UI 與插入邏輯 (優先級: 中)
- 路徑與資源部署: 規範靜態資源目錄、相對/絕對路徑處理與 CDN 可能性 (優先級: 中)
- 前後端協作: 後端提供資源/上傳端點，前端負責對話框與插入動作 (優先級: 中)
- 使用者體驗提升: 從手動編碼轉為按鍵插入，降低錯誤率與編輯時間 (優先級: 高)
- 相容性考量: 保留 HTML Source 模式，確保進階用戶仍可細部調整 (優先級: 低)
- 安全性與驗證: 上傳檔案型別/大小限制、防止路徑遍歷與 XSS (優先級: 高)
- 可維護性: 對客製代碼進行模組化、註解與文件化，便於版本升級 (優先級: 中)
- 回滾策略: 介面補強以非破壞式注入為主，方便快速停用/回退 (優先級: 中)
- 效能與載入: 圖片/表情資源做延遲載入或壓縮，避免編輯器啟動變慢 (優先級: 低)
- 視覺一致性: 工具列按鈕風格與既有 UI 對齊，減少學習成本 (優先級: 低)
